如何獲取顯示在懸停上的div，而不是將內容壓低到頁面上？

CSS

.div_wrapper { 
    float: left; 
    width: 100px; 
    background: 3333; 
    margin: 15px; 
    background: #cacaca; 
    z-index: 1; 
} 
.div_two { 
    display: none; 
    height: 120px; 
    background: #444; 
    z-index: 999; 
} 
.div_one:hover .div_two { 
    display: block; 
}

HTML

<div class="div_wrapper"> 
    <div class="div_one"> 
     <img src="#" style="width: 100px; height: 100px;"> 
     <div class="div_two">description</div> 
    </div> 
</div> 
<div class="div_wrapper"> 
    <div class="div_one"> 
     <img src="#" style="width: 100px; height: 100px;"> 
     <div class="div_two">description</div> 
    </div> 
</div> 
<div class="div_wrapper"> 
    <div class="div_one"> 
     <img src="#" style="width: 100px; height: 100px;"> 
     <div class="div_two">description</div> 
    </div> 
</div> 
<br style="clear:both;" /> 
<div class="div_wrapper"> 
    <div class="div_one"> 
     <img src="#" style="width: 100px; height: 100px;"> 
     <div class="div_two">description</div> 
    </div> 
</div> 
<div class="div_wrapper"> 
    <div class="div_one"> 
     <img src="#" style="width: 100px; height: 100px;"> 
     <div class="div_two">description</div> 
    </div> 
</div> 
<div class="div_wrapper"> 
    <div class="div_one"> 
     <img src="#" style="width: 100px; height: 100px;"> 
     <div class="div_two">description</div> 
    </div> 
</div>

當你將鼠標懸停在它顯示了描述，但它進一步推動其他的div。我試圖給div_wrapper一個固定的寬度，它修復了這個問題，但是當div2出現時，它顯示在它下面的下一個div下面。我試着添加一個z-index，並沒有改變任何東西。我需要div_two來顯示低於它的div的頂部，而不是更改佈局。

來源

2013-08-22 Brandon Turpy

'position：relative'？ – Doorknob

如果你想在之前懸停對象的位置空白，你會用visibility，不display。

visibility:hidden，而不是display:none

和visibility:visible，而不是dislpay:block

來源

2013-08-22 21:00:20

這是一個更好的主意。 –

您應該使用position: absolute來定位這個div。絕對定位的元素不會佔用其容器內的空間，防止它們推動其他元素。

在這樣的大多數情況下，您還需要將父元素設置爲position: relative，以便絕對元素可以相對於其父元素而不是整個文檔進行定位。

http://jsfiddle.net/fcW66/7/

.div_one{ 
    position: relative; 
} 

.div_two { 
    /* ... */ 
    position: absolute; 
    width: 100%; 
}

來源

2013-08-22 20:57:47

您可以使用position: absolute;做到這一點。

這裏有一個小提琴http://jsfiddle.net/QbAzY/

來源

2013-08-22 21:01:04 tomaroo

添加position:absolute;和width: 100px;您.div_two規則

.div_two { 
    display: none; 
    height: 120px; 
    background: #444; 
    z-index: 999; 
    position:absolute; 
    width: 100px; 
}

jsFiddle example

的z-index只適用於定位的元素，所以通過設置位置：絕對的你的.div_two元素不僅可以讓z-index起作用，而且可以將這些元素排除出去的正常流量的文件，並不會推其他股份下跌。請注意，您的.div_wrapper元素上也有兩個背景規則，而z-index規則沒有任何作用。

來源

2013-08-22 21:03:20 j08691

如何獲取顯示在懸停上的div，而不是將內容壓低到頁面上？

回答

相關問題