html - 绝对定位的 div 与另一个静态定位的 div 的边距顶部一起移动

Question

我有一个包含两个 div 的主体，一个是绝对定位的 div，另一个是静态默认定位的 div，我希望绝对定位的 div 占据屏幕的整个高度，但接下来出现的问题是当我尝试将 margin top 应用于静态定位的 div 时，它也被添加到绝对定位的 div。

如何让绝对定位的 div 不获得兄弟 div 的边距？

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>

Answer 1

问题是您有 margin collapse在 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>