如何防止相对定位的div按下后面的内容？在下面的示例中,我尝试在较大的红色顶部上显示一个小的绿色div,但是当绿色div出现时,下一个红色div会被按下.
这是一个运行的例子：http://jsfiddle.net/38Rqh/
<html>
<head>
<style type="text/css" media="screen">
.top {
display: none;
background-color: green;
width: 100px;
position: relative;
top: -50px;
}
.bottom {
width: 200px;
height: 200px;
background-color: red;
border: 1px solid black;
}
.bottom:hover + div {
display: block;
}
</style>
</head>
<body>
<div class="bottom">
</div>
<div class="top">Displaying data</div>
<div class="bottom">
</div>
<div class="top">Displaying data</div>
<div class="bottom">
</div>
<div class="top">Displaying data</div>
</body>
</html>
解决方法
亲戚仍然占用空间.你需要的是绝对的.一种可能性是将.bottom元素设置为position：relative,然后将.top元素放在其中并绝对定位它们.
.top {
display: none;
background-color: green;
width: 100px;
position: absolute;
top: 150px;
}
.bottom {
width: 200px;
height: 200px;
background-color: red;
border: 1px solid black;
position: relative;
}
.bottom:hover .top {
display: block;
}
<div class="bottom"> <div class="top">Displaying data</div> </div> <div class="bottom"> <div class="top">Displaying data</div> </div>
通过这种方式,.top元素将相对于其包含的底部定位.
这样做的另一个好处是,当悬停在.top本身上时不会隐藏.top,导致你在示例中看到的闪烁.
