css - 绝对定位元素展开父元素

Question

enter link description here

html,
body {
  margin: 0;
  padding: 0;
}

.div1 {
  height: 500px;
  position: relative;
  background-color: red;
}

.div2 {
  width: 100px;
  height: 100px;
  background-color: green;
  position: absolute;
  right: -80px;
  top: 0;
}

<div class="div1">
  <div class="div2"></div>
</div>

dom'div2'是绝对定位元素，dom'div1'是相对定位元素，当我将'div2'的left属性设置为'-80px'时，它推开了父dom，并且让滚动条显示，谁知道为什么....感谢帮助我!

Answer 1

absolute 属性是相对于 DOM 的祖先元素设置的，因此 -80px 在第一个 div 之外，因此它被“推出”div1。一种可能的解决方案是使用 -80 的恭维语或相对语。