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

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

来源

2017-08-05 Hayley Walters

目前还不清楚你如何希望自己的网页看起来像。你希望标题在顶部，而其他内容要在它下面开始？ – Nisarg

那是因为你正在使用的，而不是为头的位置的余量。

使用顶部
选择报头的位置。然后，添加余量顶部将出现在标题下的第一个元素。

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

来源

2017-08-05 05:01:19 Triby

谢谢！这有很大帮助。 –

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

回答

相关问题