正如你在下面的CSS中看到的,我想让child2将自己定位在child1之前。这是因为我目前正在开发的网站也应该在移动设备上工作,其中child2应该在底部,因为它包含了我想在移动设备上的内容下面的导航。-为什么不是2本杰作?这是在整个HTML中唯一被重新定位的2个div,所以2个母版对于这个微小的改变是多余的。

HTML:

<div id="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

CSS:

parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }

Child2具有动态高度,因为不同的子站点可以有或多或少的导航项。

我知道绝对定位的元素被从流中移除,因此被其他元素忽略。 我试着设置溢出:隐藏;在父div上,但这没有帮助,clearfix也没有。

我最后的手段将是JavaScript来相应地重新定位两个div,但现在我将尝试看看是否存在一种非JavaScript的方式来做到这一点。


当前回答

绝对视图将自己定位在最近的不是静态定位的祖先(position: static)上,因此如果你想让一个绝对视图定位在给定的父视图上,将父视图的位置设置为相对,将子视图的位置设置为绝对

其他回答

虽然拉伸到具有position: absolute的元素是不可能的,但通常有一些解决方案可以避免绝对定位,同时获得相同的效果。看看这个小提琴,解决了你的特定情况下的问题http://jsfiddle.net/gS9q7/

诀窍是通过浮动两个元素来反转元素顺序,第一个元素右移,第二个元素左移,所以第二个元素先出现。

.child1 {
    width: calc(100% - 160px);
    float: right;
}
.child2 {
    width: 145px;
    float: left;
}

最后,向父类添加一个clearfix,就完成了(完整的解决方案参见fiddle)。

通常,只要具有绝对位置的元素位于父元素的顶部,就很有可能通过浮动元素来找到解决方法。

你自己回答了这个问题:

我知道绝对定位的元素被从流中移除,因此被其他元素忽略。

你不能根据绝对定位元素来设置父元素的高度。

要么使用固定高度,要么使用JavaScript。

现在,人们可能会使用CSS flexbox或网格布局来反转父容器内HTML元素的可视顺序,而不使用position: absolute;。参见CSS网格布局中列的反向顺序

还可以考虑下一个方法:

CSS:

.parent {
  height: 100%;
}
.parent:after {
  content: '';
  display: block;
}

另外,因为你试图重新定位div考虑css网格

使用纯JavaScript,您只需要使用getComputedStyle()方法检索静态位置子元素.child1的高度,然后使用HTMLElement将检索值设置为相同子元素的填充顶部。样式属性。


检查并运行下面的代码片段作为我上面描述的一个实际示例:

/* JavaScript */ var child1 = document.querySelector(".child1"); var parent = document.getElementById("parent"); var childHeight = parseInt(window.getComputedStyle(child1).height) + "px"; child1.style.paddingTop = childHeight; /* CSS */ #parent { position: relative; width: 100%; } .child1 { width: auto; } .child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; } html, body { width: 100%;height: 100%; margin: 0; padding: 0; } <!-- HTML --> <div id="parent"> <div class="child1">STATIC</div> <div class="child2">ABSOLUTE</div> </div>

有一个非常简单的黑客解决这个问题

下面是一个说明解决方案的代码和框:https://codesandbox.io/s/00w06z1n5l

HTML

<div id="parent">
  <div class="hack">
   <div class="child">
   </div>
  </div>
</div>

CSS

.parent { position: relative; width: 100%; }
.hack { position: absolute; left:0; right:0; top:0;}
.child { position: absolute; left: 0; right: 0; bottom:0; }

您可以使用hack div的定位来影响子控件自身的位置。

Here's a snippet: html { font-family: sans-serif; text-align: center; } .container { border: 2px solid gray; height: 400px; display: flex; flex-direction: column; } .stuff-the-middle { background: papayawhip url("https://camo.githubusercontent.com/6609e7239d46222bbcbd846155351a8ce06eb11f/687474703a2f2f692e696d6775722e636f6d2f4e577a764a6d6d2e706e67"); flex: 1; } .parent { background: palevioletred; position: relative; } .hack { position: absolute; left: 0; top:0; right: 0; } .child { height: 40px; background: rgba(0, 0, 0, 0.5); position: absolute; bottom: 0; left: 0; right: 0; } <div class="container"> <div class="stuff-the-middle"> I have stuff annoyingly in th emiddle </div> <div class="parent"> <div class="hack"> <div class="child"> I'm inside of my parent but absolutely on top </div> </div> I'm the parent <br /> You can modify my height <br /> and my child is always on top <br /> absolutely on top <br /> try removing this text </div> </div>