固定在标题上的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称:

固定

不要为元素留出空间.相反,将其放置在相对于屏幕视口的指定位置,并且在滚动时不要移动它.打印时,将其放置在每页的固定位置.此值始终创建新的堆叠上下文.