html - 固定在标题上的 Css 位置隐藏了内容

Question

我正在创建一个新网站，但标题有问题...我将标题的位置设置为固定，这有效但标题下方的内容被隐藏了。我尝试使用 margin-top: 10px 将内容向下移动，但它所做的只是将标题向下移动。

jsfiddle 链接:

http://jsfiddle.net/vwzhda41/

Answer 1

将 padding-top:58px; 添加到 .responsiveContainer 并将 top:0; 添加到 .header.

Jsfiddle

.responsiveContainer {
    width: 100%;
    // Add padding top
    padding-top: 58px;
}

.header {
    background-color: #000000;
    padding: 10px;
    padding-left: 0;
    padding-right: 0;
    box-shadow: 0 5px 0 #232323;
    text-align: center;
    width: 100%;
    position: fixed;
    //   Add top 0
    top: 0;
}

根据 MDN :

fixed

Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. When printing, position it at that fixed position on every page. This value always create a new stacking context.