Question

我对html和css很新，我想制作一个固定的标题。但是每当我尝试时，静态元素都会被它捕获，除非我给它们定位：绝对。这是我的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

那是因为您使用了保证金而不是标头的位置。

使用顶部
然后，为标题下方显示的第一个元素添加边距顶部。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

静态元素捕获在固定标题中

1 个答案: