Question

为什么将最大偏移属性应用于最后一个子属性，其属性为position：relative，会导致父级生成滚动条？父节点没有固定的高度，否则会生成滚动条。

HTML

<div class="wrap">
  <div class="child one"></div>
  <div class="child two"></div>
  <div class="child three"></div>
</div>

CSS

.wrap {
  width: 30%;
  min-height: auto;
  background: slategrey;
  overflow: auto;
}

.child {
  width: 100px;
  height: 100px;
  background: tomato;
  margin: 1rem;
}

.three {
  position: relative;
  top: 40px;
}

Answer 1

overflow: auto也有贡献。如果你关闭它（我认为overflow: visible通常是默认值？），你会看到红色框超出了父容器的底部边界。

添加overflow: auto告诉家长让浏览器决定它的高度 - FF和其他桌面会为此呈现滚动条。

有关详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

Answer 2

基本上这是浏览器如何确定高度的问题。三个内部div都具有100px的高度和1rem的边缘。这提供了.wrap div的高度。

现在设置.three的顶部位置后，这不会改变内部div计算的高度。它只是将div向下移动，从而导致.wrap中的滚动条出现。

Parent生成带有定位子项的滚动条

2 个答案: