了解CSS的父子关系（固定块）

我一直很喜欢并成功地用CSS模拟网页。但后来我决定玩一个“固定菜单”，我的理解现在不那么清楚了

因此，我的简要知识是创建一个空白HTML文档，然后创建一个“container”div，并将所有进一步的元素放在“parent”容器中。这方面没有问题，浮动元素等都很好

但是当在父div中放置一个“固定”元素时，我不明白为什么固定元素会观察父div的左边距而忽略它的右边距

html，正文{margin:0；padding:0；}
#容器
{
保证金：0px自动；
宽度：90%；
高度：500px；
背景：#A8A8A8；
}
.固定菜单
{
位置：固定；
高度：50px；
宽度：100%；
背景色：#00a087；
}

---

你几乎就到了那里，只需添加到

。修复了菜单

中的一些css规则更多：

.fixed-menu {
    left:0;
    right:0;
    margin:0 auto;
    width: 95% // now you can change width and fixed element will be centered always
}

---

更新你的css如下，以达到你想要的结果。从父级继承宽度，而不是使用100%

.fixed-menu
{
  position: fixed;
  height: 50px;
  width:inherit;
  left:auto;
  right:auto;
  background-color: #00a087;
}

---

如@freestock.tk所述，固定元素“固定”到屏幕视口。 宽度（和设置的高度%）是相对于屏幕视口计算的

它看起来像是与父容器的左边距对齐，因为您没有使用左或右css属性定位它，它不受父容器的约束，在这种特殊情况下，它只是处于相同的水平位置

如果你设定

左：0

它将与视口的左边距对齐并忽略父容器，这将帮助您更好地理解其固定位置

html，正文{margin:0；padding:0；}
#容器
{
保证金：0px自动；
宽度：90%；
高度：500px；
背景：#A8A8A8；
}
.固定菜单
{
位置：固定；
左：0；
高度：50px；
宽度：100%；
背景色：#00a087；
}

此行为是正确的。固定元素忽略其容器和滚动条：它固定在屏幕位置。也许你脑子里想的是“静态”，写错了？这确实解决了问题，但我不确定为什么。“left:0”和“right:0”是否告诉元素识别父元素？抱歉，但通过进一步测试，这不是正确的解决方案。这既解决了我的问题，也解释了问题。我还没有处理“继承”规则。但你的帮助肯定能解释这一点，并为使用这一规则提供了更多的机会。谢谢。有了你们的帮助性回答，这就引出了另一个问题。显然，页面上的第一个元素需要清除固定元素（在本例中为50px）。实现这一目标的最佳方式是什么？在父元素中添加50px的填充或边距，或者使用隐藏的50px元素？是的，谢谢。这是对“固定”元素的更多理解。