Question

:) 当我没有设置一个元素的顶部/左侧属性固定什么acccured？请看这个示例代码：

#fixed-menu{
    background-color:#ba4444;
    border-top: 5px solid #0892cd;
    height: 60px;
    position: fixed;
    width: 100%;
    z-index:9999;
    box-shadow:rgb(128, 128, 128) 0px 5px 15px 0px;
}
#wrapper{
    height:900px;
    width:960px;
    margin:0 auto;
    background-color:yellow;
    margin-top:100px;
  
}

<body>
  <div id="fixed-menu"></div>
  <div id="wrapper"></div>
<body>

用上面的代码，固定菜单也有100px margin-top !!!!为什么????? ................... 如何计算顶部属性???

Answer 1

使用position: fixed修复元素后，三个属性left，width和right一起确定相对于窗口的水平位置和大小。（CSS使用更通用的单词视口;窗口是视口的示例。）

您最多需要三个属性中的两个，即left & width，right & width或left & right。只设置三个中的一个，或者根本不设置也是可能的。在这种情况下，CSS将根据需要使用元素的自然（“内在”）大小和/或位置，用于保留其默认值（'auto'）的任何属性。

三人组top，height和bottom也是如此。您最多需要设置其中两个：top如果要控制距窗口顶部的距离，bottom控制距离底部的距离，height如果你想指定一个固定的高度。

我希望能回答你的问题。如需进一步阅读，请参阅 link

Answer 2

提示：固定位置是文档窗口中的自由流动人员。基于固定元素在其旁边对齐之前存在的元素。

在你的例子中，在固定div之前没有elem，但是下面的包装器div你将边缘顶部设置为100px。这会影响视口。因此，您可以想象固定元素的视口开始低于包装div设置的100px标记。

你可以看到在包装div中删除边距或将包装器位置设置为固定，边距为100px。你会明白的。

如何计算固定元素的顶级属性

2 个答案: