maria maria - 1 month ago 18
CSS Question

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

Answer

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.

Comments