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

发布于12月26日

我有一个包含两个div的主体，一个是绝对定位的div，另一个是静态默认定位的div，我希望绝对定位的div采用屏幕的完整高度，但接下来出现的问题是，当我try 将页边距顶部应用到静态定位的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>

推荐答案

问题是你在Body元素上有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>

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

推荐答案

Html相关问答推荐

html列表顺序类型类似于子列表

Xpath：提取标签之间的文本，但一旦出现嵌入标签就停止

由于列中的图像，它们不会随FlexBox中的窗口大小进行调整

如何阻止Chromecast图标出现在HTML5视频

如何从卷轴中排除粘性元素？

具有可展开行的棱角material 表(垫子表)，折叠时行之间仍有间隙

有没有办法根据另一个项目调整FlexBox项目的大小？

防止position：relative的child在出界时收缩

类型'；联系人组件'；上不存在属性'；name FormControl'；

有没有什么方法可以很容易地给一个SVG一个插框阴影？

你将如何为手机制作导航栏

希望平稳过渡到悬停状态

当div位于flexbox中时，如何使div的宽度与高度相同

带有数据 URI 的音频在 Chrome 中失败

这两个CSS中的网格居中对齐内部盒子有什么区别？

如何将两个平行 div 的页面内的表格居中？

如何将自定义图像插入 Shiny plot header？

如何使用 html 和 css 为卡片创建此背景框架

无法在 css 的 body 标签中正确呈现(内联显示)

在 EJS 中将元素放置在彼此下方的列中