为什么使body标签的样式“position：relative”导致绝对定位的div开始降低？

Question

如果我创建一个div（在页面的顶部）有一个margin-top: 10px ，那么一个绝对定位的div（在更高的z-index上，在div 之外，在div的父之外 ）开始不在top: 0px但是10px ！

为什么是这样？ 简单地删除position: relative对于身体修复一切（但导致我的代码中的其他事情的问题 - 我需要相对定位的身体）。

问题代码 ：

<!DOCTYPE html>
<html>
    <head>
        <style>
            html
            {
                position: relative;
                min-width: 100%;
                height: 100%;
                min-height:100%;
            }

            body
            {
                min-width: 100%;
                min-height:100%;
                font-size: 100%;
            }
            .outer
            {
                position: relative;
                top: 0em;
                left: 0em;
                width: 100%;
                height: 100%;
                background-color: #ffffff;
            }

            .overlay
            {
                position: absolute;
                top: 0px;
                left: 0em;
                width: 100%;
                height: 100%;
                background-color: #000000;
                -moz-opacity: 0.50;
                -khtml-opacity: 0.50;
                -webkit-opacity: 0.50;
                opacity: 0.50;
                -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=50);
                filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
                filter:alpha(opacity=50);
                z-index: 6;
                display: none;
            }

            .inner
            {
                position: relative;
                width: 100%;
                border: none;
                margin: 0em;
                padding: 0em;
                margin-top: 3.875em;
                overflow: hidden;
                z-index: 0;
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="inner">s</div>
        </div>
        <div class="overlay" style="display: block;"></div>
    </body>
</html>

Answer 1

这就是position: relative CSS中的position: relative 。 它将元素从通常渲染的位置移开，并留下通常在那里占据的空间。 这里更多的是相对定位。

如果必须在body元素上保持position: relative ，请将.inner类的margin-top属性更改为padding-top ：

.inner
{
  position: relative;
  width: 100%;
  border: none;
  margin: 0em;
  padding: 0em;
  /*margin-top: 3.875em;*/
  padding-top: 3.875em;
  overflow: hidden;
  z-index: 0;
}

Answer 2

设置position: relative （或任何其他非static定位值）建立新的定位上下文。

绝对定位的后代将相对于相对定位的元素的边缘而不是窗口的边缘定位。

由于body元素默认具有非零边距和/或填充，因此.outer的顶部较低，因此其中的任何绝对定位元素也将如此。

Answer 3

但问题元素（叠加）绝对定位，而不是相对。 它的定位背景是身体。 如果将body中的margin和padding设置为零，则问题仍然存在。 overlay元素应该位于top：0和left：0相对于body的内容框...而不是。

如果您向外部添加任何内容，例如......

.outer:before{
    content: 'outer';
    visibility: hidden;
}

然后它解决了问题。 如果向外部添加边框也会修复，例如......

border: 1px solid transparent;

小提琴

似乎没有一个答案可以解释相对于身体的绝对定位元素的这种行为。

编辑：通过将主体的填充设置为1px，问题也崩溃了...

body{
    padding-top: 1px;
}

或者，通过为身体设置边框......

body{
    border: 1px solid transparent;
}

为什么使body标签的样式“position：relative”导致绝对定位的div开始降低？

问题描述

3 个解决方案

解决方案1
1 已采纳 2014-09-05 19:30:31

解决方案2
1 2014-09-05 19:32:50

解决方案3
1 2014-09-06 05:50:48

为什么使body标签的样式“position：relative”导致绝对定位的div开始降低？

问题描述

3 个解决方案

解决方案1 1 已采纳 2014-09-05 19:30:31

解决方案2 1 2014-09-05 19:32:50

解决方案3 1 2014-09-06 05:50:48

解决方案1
1 已采纳 2014-09-05 19:30:31

解决方案2
1 2014-09-05 19:32:50

解决方案3
1 2014-09-06 05:50:48