Question

我有一个页面，其中我有两个具有不同相对和固定位置的div元素。

<div class="outer1">
</div>
<div class="outer2">
</div>

和css是

 .outer1{
    width:50%;
    height:500px;
    background:red;
    position:relative;
    }

    .outer2{
    width:50%;
    background:blue;
    height:200px;
    position:fixed;
    }

但问题是两个div元素的实际宽度是不同的。我给这两个元素的宽度都是50％然后为什么宽度有差异。请帮助。

Answer 1

当您使用Position:fixed时，div将整个容器（即正文）作为参考。

固定位置元素相对于viewport或浏览器窗口本身定位。

在这种情况下，屏幕的宽度将被采用。包括身体的额外默认边距。

当你设置相对于任何元素时，它意味着＆＃34;相对于它自己＆＃34;。该元素并不关心任何规则。

这就是为什么你得到.outer div超长的原因。因为它没有遵循Body标签的规则。

当您使用margin:0时，您可以看到效果都相同。

JSFIDDLE

Answer 2

您的div .outer1正在接收其父级width: 50%，body。而div .outer2的位置为fixed，因此会从normal document flow中移除，并会相对于视口定位。

由于每个浏览器都应用包含默认边距的默认“用户代理”样式表，因此元素的填充因此文档的宽度与视口的宽度不同，这就是宽度略有差异的原因。

您可以重置默认浏览器样式，以获得所需的结果。

html, body {
  margin: 0;
  padding: 0;
}

Answer 3

像这样使用css

body{
    margin:0;
    padding:0;
  }
.outer1{
    width:50%;
    height:500px;
    background:red;
    position:relative;
    float:left;
    }
.outer2{
    width:50%;
    background:blue;
    height:200px;
    position:fixed;
    }

Answer 4

<强> what-is-a-css-reset

使用过的css reset 或定义您的html, body margin:0;padding:0;

<强>演示

＆＃13;

html, body
    {
     margin:0; 
      padding:0;
    } 
    .outer1{
        width:50%;
        height:500px;
        background:red;
        position:relative;
        float:left;
        }

        .outer2{
        width:50%;
        background:blue;
        height:200px;
        position:fixed;

        }

＆＃13;

<div class="outer1"></div>
<div class="outer2"></div>

＆＃13;

Answer 5

正如您的评论所述，可以使用css reset 或 normalize 或只是重置正文来解决此问题{ {3}}

body {
    margin: 0;
    padding: 0;
}

原因发生这种情况是因为默认情况下，大多数浏览器都有一些margin properties yourself。

众所周知，position: fixed为applied to them，因此不受margin元素body的影响。

所以，真的not within the document flow 实际是正确的。 position: fixed的元素是整个视口的50%，而position: relative的元素是50%元素的body减去它margin findObjects() 1}}（导致它不那么宽）。

Answer 6

试试这个：

    body
    {
     margin:0; 
      padding:0;
    } 
    .outer1{
        width:50%;
        height:500px;
        background:red;
        position:relative;
        float:left;
        }

        .outer2{
        width:50%;
        background:blue;
        height:200px;
        position:fixed;

        }

DEMO HERE

相对和固定的百分比宽度之间的差异

6 个答案: