html - child 的边缘影响祖先包括 body

标签 html css google-chrome firefox

<分区>

有没有人知道/解释为什么这段代码会影响垂直位置的 anchor ? 这种效果至少在 linux 上的 chrome v75 和 firefox v67 中会发生。

其实我希望:

  • 对这两个 child 的任何父元素没有影响
  • 第一个 child 在上面对齐
  • 第二个 child 之后是第一个 child ,完全可见

Codepen

.abs {
  position: absolute;
  width: 100%;
  height: 100px;
  background: red;
}

.static {
  margin-top: 100px;
  background: blue;
  height: 200px;
  width: 100%;
}
<header>
  <div class="abs">Absolute or fixed should have no space to the top</div>
  <div class="static"></div>
</header>

最佳答案

那样

.abs {
  position: absolute;
  width: 100%;
  height: 100px;
  background: red;
}

.static {
  position:absolute;
  top: 100px;
  background: blue;
  height: 200px;
  width: 100%;
}
<header style="position:relative;">
  <div class="abs">Absolute or fixed should have no space to the top</div>
  <div class="static"></div>
</header>

关于html - child 的边缘影响祖先包括 body ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57274995/

上一篇:css - 在 Polymer 3 中使用共享样式模块的正确方法

下一篇:html - 如何在向前移动时倒置元素?

相关文章:

html - 如何使div像

javascript - AudioContext() 的多个来源

javascript - 如何知道用户最近是否更新了 Chrome 扩展程序,以便我可以提醒他们

html - Bootstrap 中的 7 个相等的列

仅限 HTML5 和 CSS3

javascript - chrome.extension.getBackgroundPage 在 iframe 的扩展页面中未定义

html - 使用 css 在内联列表项之间添加箭头(图像)

javascript - 从 Mac Cocoa 应用程序内提交 HTML 表单

javascript - 无法在 Meteor 中加载 Favicon

html - 固定图片到底部