绝对位置..无论如何要阻止这些元素移动？答案

【问题标题】：position absolute.. anyway to stop this elements moving?绝对位置..无论如何要阻止这些元素移动？
【发布时间】：2017-07-23 16:55:49
【问题描述】：

当在另一个 div 中使用绝对位置时，是否有任何解决方案可以阻止没有预定义高度的元素向上移动？

这是定义高度后的样子。

http://jsfiddle.net/77tsq/：演示

.relative {
  position: relative;
  width: 600px;
  height: 400px;
  background:green;
}

.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 400px;
  height: 200px;
  background:blue;

}   

.test { position:relative;
  width: 600px;
height:200px;
float:left;
 clear:both;
 background:pink;
}

.clear { clear:both;}

HTML

<div class="relative">
<div class="absolute">

</div>
</div>
<div class="clear"></div>

<div class="test">
</div>

但是当移除高度时，它看起来像这样：

http://jsfiddle.net/77tsq/1/ - 没有高度

【问题讨论】：

相对定位的东西会避免与任何东西发生冲突。你的测试 div 有一个相对位置，所以它总是会尽量避免一些东西......绝对位置会随心所欲。我的问题是......你想用这些 div 做什么？
我也相信这可能是重复的：stackoverflow.com/questions/18752479/…
好吧，我的朋友，我一直在尝试让一个粘性菜单工作，它会在滚动时发生变化......事情变得一团糟。因此，我尝试在没有 javascript 等的情况下重新创建所有内容。只是普通的 div，似乎元素会发生变化..即使我使用固定的东西搞砸了。我认为两者下方的 div 仍会在下方浮动，但会向上移动
定位，更具体地说是绝对定位，是非常零星的.. 未定义，无论如何都可以去/喜欢的地方。如果可以的话，我建议漂浮。
问题是第一个div里面什么都没有。好吧，只有一个绝对定位的 div，但这不算数。所以，如果你没有明确地给第一个 div 一个高度，那么高度为零。就是这样。

标签： html css css-position

【解决方案1】：

我从您的问题中了解到，您希望您的.test <div> 保持在.relative div 的底部。

但它不起作用，因为 .relative div 是 .absolute div 的父 div 并且当父 div 没有定义的高度属性时，它默认具有 height: auto css 属性。所以它将具有其子 div 的高度。但是当您在子 div 上设置 position: absolute 时，子 div 将独立于父 div（不再充当子 div），因此您将覆盖/破坏此默认行为。所以父 div 将不再当孩子拥有position: absolute 并且孩子将绝对定位在所有其他 div 上作为独立 div 时，照顾它的孩子 div。

在您的情况下，子 div 即 .absolute div 被放置在另一个 div 上，而它下面的空间为其他 div 留空，因此其他 div 可以占据它下面的背景位置。由于父 .relative div 是空的，并且它没有定义的高度属性，并且它不再占用其子 .absolute div 的高度，因此它的高度变为零。同样.clear div 也是空的并且没有定义高度属性，因此高度为零。因此，.test div 占据了首位。因此，只要您将position:absolute 用于.absolute div 或者您没有为.relative div 定义高度，它就不会起作用。所以我们必须为它找到一个替代的解决方案。

因此，如果您想让它发挥作用，您有两种替代解决方案：

从子 .absolute div 中删除 css 属性 position:absolute;top:120px; 并添加 css 属性 float:right; margin-top: 120px; 以根据需要对其进行定位。在此处查看结果：https://jsfiddle.net/22namfpn/1/（.relative div 仍然不会只要它是空的或没有定义的高度属性就可见）

或

在父 .relative div 上设置自定义高度（height: 400px; 或任何合适的高度）（正如您已经尝试过的：http://jsfiddle.net/77tsq/）

（抱歉，这个答案为时已晚，但我认为它可以指导/帮助您和其他人了解为什么您的代码没有按您的意愿工作）。

【讨论】：