Question

我有两个div元素，其中一个元素有position: absolute。我的目标是使用margin-top: auto将此div放在其父级的底部。

这种定位div的方法在没有position: absolute的情况下效果很好（参见摘要）

.profileMain {
  display: flex;
}

.userInfo {
  width: 50%;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: red;
}

.userPrints {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: blue;
  margin-bottom: 10em;
}

footer {
  height: 10em;
  background: gray;
  width: 100%;
}

<div class="profileMain">

  <div class="userInfo">
    <p>This div is bottom positioned</p>
  </div>

  <div class="userPrints">
    <p>This div has normal positioning</p>
  </div>

</div>

<footer></footer>

添加position: absolute后，系统会忽略margin-top: auto。（见摘录）

.profileMain {
  display: flex;
}

.userInfoHolder{
    height: 100%;
    width: 50%;
}

.userInfo {
  width: 50%;
  position: absolute;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: red;
}

.userPrints {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: blue;
  margin-bottom: 10em;
}

footer {
  height: 10em;
  background: gray;
  width: 100%;
}

<div class="profileMain">

  <div class = "userInfoHolder">
    <p>This div retains the positioning</p>
  </div>

  <div class="userInfo">
    <p>This div is bottom positioned</p>
  </div>

  <div class="userPrints">
    <p>This div has normal positioning</p>
  </div>

</div>

<footer></footer>

为什么这种方法不适用于position: absolute？我可以使用另一种方法来获得我正在寻找的结果吗？

Answer 1

您应该了解，当您添加position: absolute时，margin-top: auto属性无效。因此，要使其位于其父元素的底部，您必须将bottom: 0属性和position: relative添加到其父元素。尝试更新您的代码。

.profileMain {
  display: flex;
  position: relative;
}

.userInfo {
  width: 50%;
  position: absolute;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: red;
  bottom: 0;
}

答案为什么？＆＃39;是，当你将position：absolute应用于任何元素时，该元素开始浮动在所有其他元素之上，就像一个不同的层。因此，具有position：absolute的元素不能呈现margin-top：auto属性，因为它无法找到应该为margin-top属性应用auto值的相应边缘。我想，这使得它有一个明确的原因？＆＃39;

保证金顶部：自动无法使用绝对位置

1 个答案: