相對元素內絕對元素的z-index

我想在父div的左右兩端放置兩個div，並帶有一些負邊距。看我的小提琴：http://jsfiddle.net/z9Unk/239/相對元素內絕對元素的z-index

但我絕對divs（部分負利潤率）被放在paren div後面。相反，我希望他們在父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; 
}

來源

2013-08-28 GJain

他們期待着在上面給我 - http://jsfiddle.net/danield770/z9Unk/240/ – Danield

對我來說太。 Firefox，Safari和Chrome。你使用哪個瀏覽器:-)？ – dronus

我的意思是在文本「item4」的情況下，「m4」是不可見的，在文本「item3」的情況下，「ite」不可見..我理解左側它的身體的末端... BUT對於右側m4 sld是可見的 – GJain

您的問題不是的絕對放置元素的放入父DIV下方，而是 - 你將他們推的邊界之外因爲負利潤率而導致的母公司。

解決方案：

是，你說，你需要負利潤率按規範 - 修改負利潤和改變他們的text-align財產。

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

FIDDLE

來源

2013-08-28 21:06:28 Danield

我想-ve邊緣，以便item3,4稍微遠離父div ......這就是我想要的設計 – GJain

因此，根據您的需求和方式更改邊距文本不會被切斷 – Danield

感謝您的幫助我的迴應......我可以找到設置邊距的「方式」，以便文本不會被剪切......因此我問了這個問題。 – GJain

的問題是div容器是overflow: hidden。此css屬性正在切割prev/next divs。

見我的解決方案：http://jsfiddle.net/LLhZx/

來源

2013-08-28 21:34:57

相對元素內絕對元素的z-index

回答

相關問題