CSS固定标头-是否需要两个位置？

Question

我看到了一些这样的示例，但是我想知道在修复标头时是否需要声明两个位置？

例如，您需要声明top:0;吗？ 和 left:0; ？

.header {
 position: fixed;
 top: 0;
 left:0;
 width:100%;
}

或者您可以只靠top:0;逃脱top:0; ？

.header {
 position: fixed;
 top: 0;
 width:100%;
}

由于我已经看过两个示例，所以我有点困惑，但是如果将top:0; left:0'设置为top:0; left:0' ，我找不到合理的解释top:0; left:0' top:0; left:0'是必要/优于top:0; 固定头？

Answer 1

由于您的width是100%因此无论哪种方式都没有关系。 但是，如果宽度不是100% ，并且<nav>是未位于左上角的元素的子元素，则导航将根据父元素水平放置。 （并非一路向左）

Answer 2

如果未声明top或left ，则默认值为left:auto或top:auto 。 left自动表示（对于固定位置的元素）：

• 如果定义了右边和宽度，则计算左边

• 如果未定义width或right，则从非滚动位置的默认内容流（如块元素）计算出left。

然后，如果您使用position:fixed则经常需要使用左/右和上/下样式。

要查看差异，请使用margin-right:-100px并将标题放在其他元素中，例如表格的第二个单元格。

在这里测试-您可以添加left:0并重新测试。 https://jsfiddle.net/vau6g09f/