css - 如何利用绝对定位元素的默认顶部

Question

请注意 position:absolute 元素可以根据其“直接父级”的位置分配默认的 top 值，而不管 relative 与否.根据BoltClock ,

it remains in the static position and doesn't go anywhere.

代码如下:

.container {
  height: 500px;
  width: 300px;
  position: relative;
}

.parent {
  height: 200px;
}

.child {
  height: 50px;
  left: 0;
  right: 0;
  position: absolute;
}

.blue {
  background-color: #a6cee3;
  border: 3px solid #1f78b4;
}

.green {
  background-color: #b2df8a;
  border: 3px solid #33a02c;
}

.red {
  background-color: #fb9a99;
  border: 3px solid #e31a1c;
}

.orange {
  background-color: #fdbf6f;
  border: 3px solid #ff7f00;
}

.violet {
  background-color: #cab2d6;
  border: 3px solid #6a3d9a;
}

<div class="container blue">
  <div class="parent orange"></div>
  <div class="parent violet">
    <div class="child red"></div>
  </div>
</div>

我想让绝对元素占据容器的“剩余空间”，即排除第一个父元素。我的想法是设置bottom:0，我期望的是top已经以某种方式设置了，如果也设置了bottom，它可以可以计算高度和展开剩余空间，但是这个不行。

有解决办法吗？

Answer 1

如果 top 和 bottom (或者 left 和 right，或所有四个)都是自动的。您不能在一侧设置偏移量并期望框保持在静态位置，因为一旦您偏移了一个框，它就不再处于静态位置。