绝对定位的 div 随着另一个静态定位的 div 的 margin-top 移动。

Question

我有一个包含两个div的主体，一个是绝对定位的div，另一个是静态默认定位的div，我想让绝对定位的div占据整个屏幕的高度，它确实占据了整个屏幕的高度，但问题随之而来，当我尝试给静态定位的div应用margin-top时，它也被添加到了绝对定位的div中。

如何使绝对定位的div不获取同级div的margin？

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  position: relative;
}

.div-1 {
  position: absolute;
  border: 2px solid red;
  width: 90%;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 100vh;
}

.div-2 {
  height: 200px;
  width: 90%;
  background-color: blueviolet;
  margin-top: 8rem;
}

<div class="div-1"></div>
<div class="div-2"></div>

- BIKI DAS

---

我不知道，但是从body中删除position: relative;解决了这个问题。 - ninadepina

似乎无法工作！ - BIKI DAS

Answer 1

问题在于您在 body 元素上使用了 外边距折叠。当父元素和子元素（例如 body 和 .div-2）之间没有内容时，就会发生外边距折叠。您可以通过将 body 元素的 display 属性设置为 flow-root 来轻松解决此问题。

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  position: relative;
  /* Set flow-root */
  display: flow-root;
}

.div-1 {
  position: absolute;
  border: 2px solid red;
  width: 90%;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 100vh;
}

.div-2 {
  height: 200px;
  width: 90%;
  background-color: blueviolet;
  margin-top: 8rem;
}

<div class="div-1"></div>
<div class="div-2"></div>

- jme11

---

谢谢你解释我哪里错了，你的解决方案起作用了！ - BIKI DAS

Answer 2

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  position: relative;
}

.div-1 {
  position: absolute;
  border: 2px solid red;
  width: 90%;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 100vh;
  z-index:1;
  
}

.div-2 {
  height: 200px;
  width: 90%;
  background-color: blueviolet;
  top: 8rem;
  position: inherit;
  
}

使用top和position继承代替margin-top，检查是否可用。

- Satish Thakur