固定標題中捕獲的靜態元素

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

謝謝！這有很大幫助。 –

固定標題中捕獲的靜態元素

回答

相關問題