CSS3定位在粘性菜单下方

Question

我想让我的菜单卡在页面顶部，所以我使用position: fixed，但我对菜单下方的内容有疑问 - 我无法定位它。例如margin-top不起作用，我无法理解为什么会这样 这是一个JSFiddle。

Answer 1

将菜单设为0

的顶部位置

#menu{ 
    top:0;
}

#content{
    margin-top: 50px;
}

使用id或class将样式/定位应用于您的内容div。我使用了id，因为这是你选择的，但是现在最好的做法是使用所有样式的类。保留使用ID for javascript hooks。

以下是您的修正：https://jsfiddle.net/8gjfLe5d/2/

Answer 2

你的代码中有几个问题，首先是@mgiesa说你必须把

top:0;

另一个问题是内容不是有效标签，因此它没有用户代理自动添加的dafualt定位和显示属性。

如果你使用.content作为一个类，你应该没有问题，如fiddle所示

Answer 3

您必须为菜单ID指定top和left

#menu{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:50px;
}

编辑： 这与内容标签

有关

https://jsfiddle.net/wgg9bkmr/2/