html - 显示 block 的定位问题

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 的位置