html – 为什么使body标签的样式“position：relative”导致绝对

发布时间：2020-12-14 23:24:44 所属栏目：资源来源：网络整理

导读：如果我创建一个div(在页面的顶部)有一个margin-top：10px,那么一个绝对定位的div(在更高的z-index上,在div之外,在div的父之外)开始不在顶部： 0px但是10px！ http://jsfiddle.net/afv3gze7/ 为什么是这样？简单地删除位置：相对于身体修复一切(但导致我的代

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

http://jsfiddle.net/afv3gze7/

为什么是这样？简单地删除位置：相对于身体修复一切(但导致我的代码中的其他事情的问题 – 我需要相对定位的身体).

http://jsfiddle.net/afv3gze7/1/

问题代码：

<!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>

解决方法

这就是位置：CSS中的相对位置.它将元素从通常渲染的位置移开,并留下通常在那里占据的空间.这是 more about relative positioning.

如果必须在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;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!