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

我想，如果人们滚动页面，标题将继续显示（标志+导航栏）。这是我正在使用的css代码：

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

}

但现在的情况是：

如您所见，标题现在与图像重叠，我如何修复此问题？我尝试过使用边距底部/填充底部，但边距不起任何作用，而填充使背景框变大

---

如何修复此问题？

假设您的HTML结构如下所示

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

---

由于标题有一个固定的位置，所以所有其他元素都不会考虑这一点。您可以为从顶部定位为80px的所有其他内容创建一个“包装器”div。只要有相对（默认）位置，仅添加页边距或移动最顶端div的元素可能就太有效了。

您应该向内容标签添加页边距，以便它们不会立即被标题重叠

---

请参见此处：www.jsfiddle.net/cranavvo/5F8EP/

内容容器的页边空白顶部？使用谷歌？根据你的图片，我不完全理解这个问题，但我认为是这样的：因为标题栏有一个固定的位置，页面上的其他元素（比如那些半隐藏的图片）都隐藏在它下面，即使用户没有向下滚动。如果是这样的话，你只需要在页面顶部，在半隐藏图片的上方添加一些填充。在那里放一个80像素高的DIV。[如果我不理解这个问题，请再解释一下！谢谢！]非常感谢，我应该在这之前考虑一下，哈哈。

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