CODEWITHSUNDEEP
htmlcss
maria
maria

Reputation: 159

z-index wont work positions

I'm trying to achieve that the erf_fromto would have a higher z-index than left_side, cause left_side do have a border, while i want the erf_fromto to be over the border.

this is how it looks like currently, while I want the erf_fromto to be over the line.

enter image description here

  <body class="parent" ng-app="myApp">
    <div class="left_side child"></div>
    <div class="right_side">
    <div class="erf_block" style="position:relative;">
            <div class="erf_fromto">2011 - 2012</div>
        </div>
    </div>

    </body>

css:

.left_side {
    width:35%;
    float:left;
    border-right: 3px solid #F6F6F6;
}

.parent {
    overflow: hidden;
    position: relative;
}


.child {
    height: 100%;
    position: absolute;
}


.erf_fromto {
    position: absolute;
    left: -122px;
    border: 2px solid #F6F6F6;
    padding: 5px;
    font-weight: bold;
    box-shadow: 0px 0px 2px #F6F6F6;
    font-size: 15px;
    z-index: 99;
    overflow: hidden;
}

codepen: http://codepen.io/anon/pen/XjzwdN

Upvotes: 0

Views: 62

Answers (3)

ℛɑƒ&#230;Ŀᴿᴹᴿ
ℛɑƒ&#230;Ŀᴿᴹᴿ

Reputation: 5326

Maria,

If you add a background to left_side and erf_fromto you will see they are on the correct position.

I think you just need add background property on your erf_fromto class:

.erf_fromto {
   ...
   background: white;
   ...
}

I hope it helps...

Good Luck!

Upvotes: 0

Cameron Hurd
Cameron Hurd

Reputation: 5031

z-index applies to an element and it's children. Since .erf_fromto is nested inside .erf_block, which is inside .right_side you'll want to ensure that it's .right_side that has the higher z-index than .left_side!

From MDN:

The z-index property specifies the z-order of an element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.

Upvotes: 1

Jeroen Stoker
Jeroen Stoker

Reputation: 11

If you also put a position: relative; and z-index:0; to the .left_side child it will work

Upvotes: 0

Related Questions