绝对位置的元素应该紧挨着其他不是绝对位置的元素

Question

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

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

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

如果我这样做：

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

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

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

Answer 1

试试这个，所以悬停的内容是绝对定位的：

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

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

Answer 2

希望你一切都好，

你能不能在悬停时不要绝对定位:

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

}

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

Answer 3

这是因为您将 "this should not push" 元素作为主元素 div、a.k.a 的同级元素。它是在红色 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 的高度设置为您想要的任何值

Answer 4

让我知道这是否是您要找的：

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

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

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

Answer 5

您需要绝对定位 .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>

绝对位置的元素应该紧挨着其他不是绝对位置的元素

element that is position absolute should stay next to other elements that are not

html

css

absolute