Html 使用绝对定位更改元素的顺序_Html_Css

Html 使用绝对定位更改元素的顺序

html css

Html 使用绝对定位更改元素的顺序,html,css,Html,Css,我想通过绝对定位将子元素移动到其父元素的底部即父级将完成，然后元素将直接出现在后面。即父母的底边距将与孩子的上边距对齐我已经通过填充实现了这一点，但我不知道如何在孩子的大小可变时实现这一点？我有一个硬编码的填充尺寸 <body> <footer class="footer"> <p> I am the footer </p> <div class="after"> <h2> I want to

我想通过绝对定位将子元素移动到其父元素的底部

即父级将完成，然后元素将直接出现在后面。即父母的底边距将与孩子的上边距对齐

我已经通过填充实现了这一点，但我不知道如何在孩子的大小可变时实现这一点？我有一个硬编码的填充尺寸

<body>
  <footer class="footer">
    <p> I am the footer </p>
    <div class="after">
    <h2> I want to appear after the footer</h2>
     <img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg"/>
    </div>
    <h3> I should be in the footer</h3>
  </footer>

</body

codepen->

从正常流中移除绝对定位的元素。根据定义，它们在定位时不会考虑其他元素。正如您所看到的，您需要硬编码一些值

我建议避免绝对定位，并使用flexbox解决方案来更改元素的顺序：

现在只是胡闹。。我把所有的填充物都去掉了，然后把上面的东西放上去。。。似乎工作正常。@IanWatson

.footer

元素是否具有硬编码的高度？这不会导致它与下面显示的内容重叠吗？谢谢Josh，这也是一个理想的解决方案too@IanWatson但是

.footer

元素不包含绝对定位的元素。看看当它下面有内容时会发生什么，或者即使你试图在上面设置一个

背景色：啊，我明白了。在这个场景中，因为它是页脚，我知道下面不会有任何东西，但我明白你的意思。然而，我认为flex显示器在IE8上不起作用，这是一个要求。
.footer {
  position: relative;
  left: 30px;
  padding-bottom: 500px;
}

.after {
  position: absolute;
  bottom: 0px;
  left: 0px;
}

.footer {
  display: flex;
  flex-direction: column;
}
.footer .after {
  order: 3;
}