绝对位置的元素应与其他非绝对位置的元素相邻

Question

我想自动将元素彼此相邻放置（即可以添加或删除元素，因此元素必须更改位置）。并且其中一个元素需要展开，而不是下推它下面的内容。

我希望它更容易理解：https://codepen.io/anon/pen/OEOxee

我想让 .absoluteit 位置绝对，这样它就不会下推它下面的内容。

如果我这样做：

.absoluteit {
  background-color: red !important;
  position: absolute;
}

然后它可以工作，除了红色元素覆盖另一个绿色元素（再次参见代码笔）

有谁知道我如何实现这一点，以便当我将鼠标悬停在红色项目上时，它会消耗隐藏的内容，但仍与其部分中的其他元素保持一致？

Answer 1

您需要绝对定位.right 元素，使其高度或高度变化不会影响其他元素。

看我的例子：

.main {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

.right > div {
  display: inline-block;
  width: 100px;
  background-color: green;
  vertical-align: top;
}

.right .absoluteit {
  background-color: red;
  border: 3px solid black;
}

.absoluteit:hover .content {
  display: block;
}

.content {
  display: none;
}

<div class="main">
  <div class="left">Left</div>
  <div class="right">
    <div class="absoluteit">absolute me
      <div class="content">content of absolute</div></div>
    <div >not me</div>
    <div>not me</div>
  </div>
</div>
<div>this should not push down</div>

Answer 2

试试这个，让悬停的内容绝对定位：

.absoluteit:hover .content {
  display: block;
  position: absolute;
}

如果你不想让他们越过下一行的绿色项目，你需要给它一个宽度。

Answer 3

希望你一切都好，

你能不能在悬停时不绝对定位：

.absoluteit:hover .content {
 display: block;
  position:absolute;

}

这对您的解决方案有用吗？

Answer 4

如果这是您要找的，请告诉我：

.absoluteit {
  position: relative;
  background-color: red !important;
}

.absoluteit:hover .content {
  display: block;
  position: absolute;
}

.content是绝对相对.absoluteit定位的，所以前者不影响页面布局，后者保持在原来的位置。

Answer 5

这是因为您将“this should not push”元素作为主 div 的同级元素，也就是在红色 div 的父级之后提到它，因此从技术上讲，它始终位于红色 div 之下。

试试这个：

  <div class="main">
  <div class="left">Left<br>
<div>this should not push down</div></div>
  <div class="right"><div style="float:left;">
    <div class="absoluteit">absolute me
  <div class="content">content of absolute</div></div></div>
    <div style="float:right;white-space:nowrap;"><div>not me</div></div><div style="float:right;white-space:nowrap;"><div>not me</div></div>
  </div>
</div>

将它移到左列 div 内，然后像我一样在此处添加更多 CSS，应该可以修复它

如果 main 是页眉尝试：

  <div class="main" style="overflow-y:visible;height:20px;">
  <div class="left">Left</div>
  <div class="right"><div style="float:left;">
    <div class="absoluteit">absolute me
  <div class="content">content of absolute</div></div></div>
    <div style="float:right;white-space:nowrap;"><div>not me</div></div><div style="float:right;white-space:nowrap;"><div>not me</div></div>
  </div>
</div>
<br>
<div>this should not push down</div>

并将主 div 的高度设置为您想要的任何值