陷入 fixed header 的静态元素

Question

我是 html 和 css 的新手，我想做一个固定的 header。但是每当我尝试时，除非我给它们位置：绝对，否则静态元素会被卡在它后面。这是我的 CSS:

.heady {
    position: fixed;
    width: 100%;
    background: hsla(176, 100%, 75%, 0.24);
    margin-bottom: 100px;
}
.header {
    margin: auto;   
    width:25%;
    text-align: center;

}
.header h1{
    font-family: Arial;
    color: gray;
    border-right: 3px solid powderblue;
    border-left: 3px solid powderblue;
}


html body {
    background: url("https://s-media-cache-ak0.pinimg.com/736x/5b/3f/9a/5b3f9a68aaa539d6997bbc0c74efa45b--pretty-star-blue-aesthetic.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.support {
    position: static;
    margin-top: 100px;
}

这里是 HTML:

 <body><div class="heady">
<div class="header"><h1>Big Title</h1></div>
</div>
<div class="support"><p>This is some text stuck behind the header</div>
</body>

Answer 1

那是因为您使用的是保证金而不是 header 的仓位。

Select使用top
然后，为将出现在 header 下方的第一个元素添加边距顶部。

.heady {
    position: fixed;
    top:50px;
    width: 100%;
    background: hsla(176, 100%, 75%, 0.24);
}
.header {
    margin: auto;   
    width:25%;
    text-align: center;

}
.header h1{
    font-family: Arial;
    color: gray;
    border-right: 3px solid powderblue;
    border-left: 3px solid powderblue;
}


html body {
    background: url("https://s-media-cache-ak0.pinimg.com/736x/5b/3f/9a/5b3f9a68aaa539d6997bbc0c74efa45b--pretty-star-blue-aesthetic.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.support {
    margin-top: 150px;
}

<body>
    <div class="heady">
        <div class="header"><h1>Big Title</h1></div>
    </div>
   <div class="support">This is some text stuck behind the header</div>
</body>

陷入 fixed header 的静态元素

Static elements caught in fixed header

html

css

fixed