z-индекс абсолютного элемента внутри относительного элемента

Question

Я пытаюсь расположить два div на левом и правом концах родительского div с некоторым отрицательным отрывом. Смотрите мою скрипку: http://jsfiddle.net/z9Unk/239/

Но мои абсолютные divs (часть с отрицательными полями) сложены за разделителем paren. Вместо этого я хочу, чтобы они были поверх родительского div.

Что не так с моим кодом ниже?

Даже если я установил z-index: 100 для абсолютных элементов.

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; 
} 

Answer 1

Ваша проблема не, что абсолютно размещены элементы получить размещены ниже родительского DIV, а - что вы толкнули их за пределы родительский div из-за отрицательных полей.

Решение:

Учитывая то, что вы заявили, что вам нужно отрицательные поля, как в спецификации - изменить свои отрицательные поля и изменить их text-align собственности.

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

FIDDLE

Answer 2

Проблема заключается в том, что контейнер DIV является overflow: hidden. Это свойство css разрезает prev/next divs.

Смотрите мое решение: http://jsfiddle.net/LLhZx/