显示块

Question

我的导航设置为display: block;，我的段落设置为display: block;但是我的段落部分位于页面顶部，涵盖导航。我有导航的CSS，我会认为它应该推开其他物体？

nav {
display: block;
}


 nav ul {
    display: block;
    position: fixed;
    -webkit-box-sizing: border-box; width: 100%;
    -moz-box-sizing: border-box; width: 100%;
    box-sizing: border-box; width: 100%;
    text-align: center;
    list-style-type: none;
    text-decoration: none;
    background: rgba(255,255,255,0.2);
    }

    nav li {
        display: inline-block;
        margin-left: 5px;
        margin-right: 5px;
        padding-top: 10px;
        padding-bot: 10px;
        font-family: "Changa One",Cursive;
        font-size: 1.225em;
        border-bottom: 2px solid transparent;
        transition: border-color 300ms;
        -webkit-transition: border-color 300ms;
        -moz-transition: border-color 300ms;
    }

这是我的段落代码：

p {
background-color: #fff;
display: block;
color: orangered;
}

如果我添加边距或填充，它仍然会粘在页面顶部，只需将文本向下推进。使元素更大但不会进一步下降。任何答案都非常感谢：）

Answer 1

    position: fixed;

固定元素将忽略您的导航，使导航的高度自动为0.您需要设置导航高度或更改导航ul的位置