Question

我想绝对定位一个div，但它并没有粘在顶部，而是有一个空白区域。容器有position:relative，内部块有position:absolute个css规则。我尝试使用代码并注意到改变背景位置有一些影响，我不知道为什么。

<header>
   <div class="header-wrapper">
      <div class="header-slogan-1 text-center">Base info</div>
   <div class="header-info">Info</div>
   </div>
</header>

我想要的是将绿色块放在顶部（见小提琴）。

以下是fiddle

任何人都可以解释一下这个行为并回答为什么这个块从顶部移开了吗？

Answer 1

它从顶部移位，因为它相对于其父.header-wrapper，具有上边距。为了获得所需的结果，您必须从其父级中删除position: relative，因此它将相对于视口而位于顶部。

编辑：我意识到，他的边距实际上是应用于包装器的子节点，导致margin collapsing。要解决此问题，您需要将overflow: auto应用于父元素。通过这样做，你仍然可以在包装器上有一个position: relative，因为它不会被孩子推倒。看看演示：

/* header block */
header {
    height: 536px;
    background-color: #ddd;
    background-position: center;
    background-size: 100% 536px;
    background-repeat: no-repeat;
    overflow: hidden;
}

header .header-wrapper {
    position: relative;
    overflow: auto;
    z-index: 2;
}

.header-slogan-1 {
    font-size: 32px;
    font-weight: 700;
    font-style: italic;
    margin-top: 88px;
}

.header-wrapper .header-info {
    position: absolute;
    top: 0;
    z-index: 3;
    background-color: #4caf50;
    max-width: 600px;
    padding: 25px 25px 25px 75px;
    color: #fff;
}

.text-center {
  text-align: center;
}

<header>
   <div class="header-wrapper">
      <div class="header-slogan-1 text-center">Base info</div>
       
       
   <div class="header-info">Info</div>
   </div>
</header>

Answer 2

如果我正确理解了这一点，你希望标题周围没有空格。如果是这种情况，那么只需添加

body {
    margin: 0;
    padding: 0;
}

到你的CSS的顶部，你应该全部设置。

Answer 3

我将margin-top: 88px;更改为padding-top: 88px;的{{1}}，因为它不会更改我的布局。我在包装器类中有一个图像，它居中并可能超过容器大小，因此我需要header-slogan-1和position:relative。

最后我决定选择我的解决方案。对不起亚当没有选择你的答案。

Css位置绝对在顶部留下空白区域

3 个答案: