html - z-index of absolute element inside a relative element -

i trying position 2 divs on left , right ends of parent div negative margin. see fiddle: http://jsfiddle.net/z9unk/239/

but absolute divs (part negative margins) stacked behind paren div. instead want them on top of parent div.

what wrong code below?

even though set z-index:100 absolute elements.

html

<div class="item1">   <div class="item3 prev ">       item3   </div>   <div class="item4 next">       item4   </div>   <div class="item2">       item2   </div>   <div class="item2">       item2   </div> </div> 

css:

.item1 {   position:relative;   white-space: nowrap;   width:auto;   overflow: hidden;   border:2px solid red;   display:inline-block; }  .item2 {  position:relative;   float:left;   background-color: green;   width : 255px;   height : 205px;   margin-right:6px;   border:1px solid blue; }  .item3, .item4 {   top:65px;   display:block;   position: absolute;   width: 50px;   height: 50px;   border:1px solid black;   z-index:100; }  .prev {     left:-25px; } .next {     right:-25px; } 

your problem was not absolutely placed elements placed below parent div, rather - pushed them outside bounds of parent div because of negative margins.

solution:

being stated need negative margins per spec - modify negative margins , change text-align property.

.prev {     left:-15px;     text-align: right; } .next {     right:-15px;     text-align: left; } 

fiddle