标题与其他文本/图像重叠

Question

我希望如果人们在页面上滚动，标题会一直显示（徽标+导航栏）。这是我正在使用的css代码：

#header_bar
{
    margin: 0 auto;
    width: 100%;
    background-color: #1F1D1E;
    height: 80px;
    position: fixed;
    top:0;

}

但这就是现在发生的事情：http://puu.sh/6FiXY.jpg

如您所见标题现在与图像重叠，我该如何解决？我尝试过使用margin-bottom / padding-bottom，但是当padding使背景框变大时，margin不会做任何事情。

我该如何解决这个问题？

Answer 1

假设您的HTML结构类似于

<div id="header_bar">...</div>
<div id="someOtherDiv">...</div>

将margin-top添加到#header_bar

之后的下一个元素

#someOtherDiv {
  margin-top:80px; /* 80px because #header_bar is taking up 80px in height. */
}

demo

Answer 2

由于您的标题位于固定位置，因此所有其他元素都不会将此考虑在内。您可以为距离顶部80px定位的所有其他内容创建“包装器”div。只要添加一个边距或移动最顶部div的元素，只要它具有相对（默认）位置，它也可以起作用。

Answer 3

您应该在内容代码中添加一个边距，以便它们不会立即与标题重叠。

见这里： www.jsfiddle.net/cranavvo/5F8EP /