如何获取显示在悬停上的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，而不是将内容压低到页面上？

回答

相关问题