z-index會影響div的高度嗎？

我的手上有一點難題。我有一個應該包含一些圖像的div。圖像不是浮動的 - 我使用display：inline-block獲取了它們。圖像具有一些z-index屬性，因爲懸停時，我會調暗圖像的不透明度並顯示一些文字和一個按鈕。z-index會影響div的高度嗎？

然而，應該只包含不改變其HEIGH圖像調整到其內容的DIV。至於爲什麼，我完全被難住了。調整height屬性將調整部分的大小，但它不會自動調整包含圖像，即使他們的div孩子....

誰能告訴我這是爲什麼發生，如何解決它？

我已經包含了我的html和css的一部分。

<div class="second-section"> 
    <div class="outfitcontainer"> 
    <div class="outfit"> 
     <img src="purelyoutfit6.png" width="100%" height="100%"/> 
    </div> 
    <div class="overlay"> 
     <p class="price">$350 <span class="oldprice">$4200</span></p> 
     <p class="item">FURR COAT</p> 
     <p class="designer">Antonio Marras</p> 
     <a href="#"><button type="button" class="btn btn-getit">GET IT</button></a> 
    </div> 
    </div> 
    <div class="outfitcontainer"> 
    <div class="outfit"> 
     <img src="purelyoutfit7.png" width="100%" height="100%"/> 
    </div> 
    <div class="overlay"> 
     <p class="price">$350 <span class="oldprice">$4200</span></p> 
     <p class="item">FURR COAT</p> 
     <p class="designer">Antonio Marras</p> 
     <a href="#"><button type="button" class="btn btn-getit">GET IT</button></a> 
    </div> 
    </div> 
</div> 

.outfitcontainer { 
    position: relative; 
    width: 200px; 
    height: 80%; 
    background-color: #FFFFFF; 
    display: inline-block; 
    margin-left: 60px; 
    margin-top: 20px; 
    margin-bottom: 20px; 
    padding: 20px; 
} 
.outfit img { 
    display: inline-block; 
} 

.outfit, .overlay { 
    position: absolute; 
    width: 200px; 
    height: auto; 
    left: 0; 
} 

.outfit { 
    z-index: 10; 
    background-color: white; 
} 
.outfitcontainer:hover .outfit { 
    opacity: .5; 
    cursor: pointer; 
} 
.outfit:hover + .overlay{ 
    z-index: 50; 
} 
.overlay:hover { 
    z-index: 50; 
} 

.overlay { 
    z-index: 0; 
    text-align: center; 
    font-weight: bold; 
} 
.overlay p { 
    display: block; 
    padding: 10px 0; 
    color: black; 
    opacity: 1; 
    line-height: 50%; 
} 
.overlay p:nth-child(1) { 
    margin-top: 50% 
} 
.price, .item { 
    font-family: "Brandon Grotesque Medium"; 
    font-size: 1em; 
    color: #000000; 
    line-height: 25%; 
    margin-top: -10px; 
} 
.oldprice { 
    text-decoration: line-through; 
    color: #383838; 
    font-size: .75em; 
    line-height: 25%; 
} 
.designer { 
    font-family: "Didot Light Italic"; 
    font-size: 1em; 
    color: #000000; 
    line-height: 25%; 
    margin-top: -15px; 
} 
.second-section { 
    width: 100%; 
    height: auto; 
    z-index: 50; 
    background-color: #000000; 
}

來源

2014-11-04 hmlee

這裏是什麼，我想你想的jsfiddle：http://jsfiddle.net/vvc93jfr/

基本上，爲什麼你的兩盒已經不再是黑色背景裏面的原因是因爲你有你的衣服和疊加設置爲position: absolute;

你只希望疊加層具有絕對的位置。剩下的就是將它的頂部/左邊設置到你想要覆蓋的位置。

也有很多，你可能要清理隨機樣式。

最終的z-index不影響div的高度。它隻影響z軸。把它想象成一堆紙，然後用鳥瞰的視角來看這堆紙。您只能看到頂部的紙張。那張紙本質上會有一個被認爲是最高的z-索引（例如3424242134）。它下面的表格將具有較低的Z指數。

來源

2014-11-04 00:25:48 chdltest

z-index不影響div的高度。。第二個截面的

高度爲80％ - 什麼是父母的身高是多少？如果你正確設置父母身高，它應該沒問題。

此外，您可能希望從改變高度最小高度 - 以確保圖像完全顯示的情況下，他們比你設置的高度大。

來源

2014-11-04 00:04:17 Chris

z-index會影響div的高度嗎？

回答

相關問題