html – 防止相对定位的div推送内容

发布时间：2020-12-14 22:29:41 所属栏目：资源来源：网络整理

导读：如何防止相对定位的div按下后面的内容？在下面的示例中,我尝试在较大的红色顶部上显示一个小的绿色div,但是当绿色div出现时,下一个红色div会被按下. 如果有更好的方法,我会很感激提示. 这是一个运行的例子：http://jsfiddle.net/38Rqh/ htmlheadstyle type="

如何防止相对定位的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元素放在其中并绝对定位它们.

http://jsfiddle.net/38Rqh/1/

.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,导致你在示例中看到的闪烁.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!