在div的外部添加“填充”？

Question

我真的不确定如何说出这个问题，但是这里......我的网页顶部有一个导航栏，其位置为“固定”，即使我保持在顶部向下滚动。但是，每当我向下滚动时，我都会有一个框，可以容纳我的所有文本/博客与这个导航栏重叠。

有没有办法“删除”盒子的几个像素（包含我所有东西的那个），以便导航栏永远不会与它重叠？如果这令人困惑，我很抱歉，但就像我说的那样，我不确定如何说出来。

截图：
当我没有向下滚动时 -
当我（重叠） -

时

所以我想摆脱内容容器的重叠区域（可能比它低5px）。

Answer 1

在包含主要内容的框中，添加一个等于导航栏高度的margin-top。例如，如果这是你的html：

<div id="navbar">...</div>
<div id="content">...</div>

然后你的css会是这样的：

#navbar {
    position: fixed;
    top: 0;
    left: 0;
    height: 50px;
}

#content {
    margin-top: 50px;
}

Answer 2

好的，谢谢你的截屏。

#navbar_id {
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
    z-index: 25;
}

#main_stuff_id {
    z-index: 24;
    /*other
    style
    rules*/
}

请记住“css box model”：http://www.w3schools.com/css/box-model.gif

Answer 3

其他答案都是现货。我会检查边距和溢出设置。

如果div具有绝对，相对或固定定位，您还可以使用z-index。

z-index的值越高，元素堆栈中的值越高。因此，z-index为2的元素将显示在z-index为1的元素前面。

Answer 4

听起来您希望在设置了position: fixed;的元素上强制执行边距。我认为这不会起作用，但你可以在要实际修复的元素周围放置一个固定位置的容器。这个容器可以有填充，这将产生所需的效果。

<div style="position:fixed;padding:16px;background-color:#fff;width:100%;box-sizing:border-box">
    <!-- don't fix the inner element -->
    <div style="background-color:red">The content you want to be fixed.</div>
</div>

工作小提琴：http://jsfiddle.net/qtHtY/

Answer 5

如果您使用的是position，则可以使用top: #px;和left: #px