显示块的定位问题

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

显示块的定位问题

Positioning issues with display block

html

css

position

block