Question

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

即父母将完成，然后元素将直接出现。即父母的底部保证金将与孩子的最高保证金保持一致。

我通过填充有点实现了这一点但是当孩子的大小可以改变时我不知道如何使这个工作？即我有一个硬编码的填充大小。

<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

css - ＆gt;

.footer {
  position: relative;
  left: 30px;
  padding-bottom: 500px;
}

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

codepen - ＆gt; http://codepen.io/ianw92/pen/pvXYeV

Answer 1

从正常流程中移除绝对定位的元素。因此，根据定义，他们在定位时不会考虑其他因素。如您所见，您需要对某些值进行硬编码。

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

Updated Example

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

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

1 个答案: