html - 为什么位置:absolute; will enlarge the test div's height?

Question

div.test 是自动设置高度的，没有固定高度。

.test {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background: yellow;
  width: 200px;
  height: auto;
  padding: 10px;
}

<div class="test">
  it is a test info for my div .
</div>

现在在css中添加一个position:absolute;，其他css属性保持不变。

.test {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background: yellow;
  width: 200px;
  height: auto;
  padding: 10px;
  position: absolute;
}

<div class="test">
  it is a test info for my div .
</div>

div.test的高度变大了，为什么？

Answer 1

在第一种情况下，div 的 position 是 static，因此 top/right/bottom/left 属性不适用。将位置更改为 absolute 后，现在会考虑这些属性。特别是 bottom 属性导致 div 扩展。尝试从您的代码中删除 bottom: 0;，您会看到 div 折叠回其内容的高度:

.test { 
    top: 0;
    right: 0;
    left: 0;
    background: yellow;
    width: 200px;
    height: auto;
    padding: 10px;
    position: absolute;
}

<div class="test">it is a test info for my div.</div>