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

我想绝对定位一个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）

这是你的电话号码

---

请任何人解释一下这种行为并回答为什么块会从顶部移动？

它是从顶部移动的，因为它相对于其父级

。页眉包装器

，它有一个上边距。为了获得所需的结果，必须从其父对象中删除

position:relative

，因此它将相对于视口，并将放置在顶部

编辑：我意识到，边距实际上应用于包装器的子级，导致。为了解决这个问题，您需要对父元素应用

overflow:auto

。通过这样做，您仍然可以在包装器上有一个

位置：relative

，因为它不会被子对象向下推。请看演示：

/*头块*/
标题{
高度：536px；
背景色：#ddd；
背景位置：中心；
背景尺寸：100%536px；
背景重复：无重复；
溢出：隐藏；
}
标题。标题包装器{
位置：相对位置；
溢出：自动；
z指数：2；
}
.标题-1{
字体大小：32px；
字号：700；
字体：斜体；
边缘顶端：88px；
}
.header包装器.header信息{
位置：绝对位置；
排名：0；
z指数：3；
背景色：#4caf50；
最大宽度：600px；
填充：25px 25px 25px 75px；
颜色：#fff；
}
.文本中心{
文本对齐：居中；
}

基本信息
信息

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

body {
    margin: 0;
    padding: 0;
}

---

到css的顶部，您应该已经准备好了。

我更改了

页边空白顶部：88px插入
填充顶部：88px属于
标题-标语-1
，因为它不会更改我的布局。我在包装类中有一个图像，它居中，可能超过容器大小，因此我需要
位置：相对
和
溢出：隐藏

最后我决定选择我的解决方案。抱歉，亚当没有选择您的答案。
但是包装纸没有空白？我看不出来
.header-glasson-1
具有margin-top属性，但它不是包装器。没错，您可以使用
溢出：auto
解决此问题。好的，谢谢您的回答。我想将
的
页边距顶部
改为
填充顶部
。header-glossion-1
元素就可以了。但是
位置的行为：相对的
对我来说仍然很棘手。如果它解决了您的问题，请接受答案。我不完全清楚为什么坐标原点从上边框下方开始88 px，背景从上边框阴影。在我看来，这应该是一致的。如果包装被移动，它应该相应地被着色。如果不是，它应该从顶部的0px开始，并且不应该有余量。这有点棘手。但没关系，我可以结束这个问题。“从我的观点来看，它应该是对应的。”但很明显，css不是这样工作的