固定的div頁面破壞的結果

我有一個固定的標題，在我的部分下有一個全屏幕背景圖像。我想要做的是，如果我有一個警報，它會在整個頁面上方回顯，推下標題和英雄。但它要麼不會出現，要麼當我得到它顯示它不會保持固定和滾動頁面。固定的div頁面破壞的結果

.sitrep { 
    top 0; 
    height: 50px; 
    width: 100%; 
    position: fixed; 
    z-index: 10000; 
} 



.siteHeader { 
    min-height: 76px; 
    height: 76px; 
    overflow: visible; 
    background-color: #000; 
    color: #f4f4f4; 
    position: fixed; 
    top: 0; 
    z-index: 10000; 
} 





#hero { 
    height: 100vh; 
} 

.hero { 
    background: url(images/hero-bg.jpg) no-repeat top center; 
    background-color: #000; 
    background-size: cover; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
} 

#hero-content { 
    position: absolute; 
    width: 100%; 
    bottom: 0%; 
} 

#hero-content a { 
    background-color: #131313; 
    padding-top: 10px; 
    height: 40px; 
    display: block; 
    font-size: 12px; 
    text-align: center; 
    text-transform: uppercase; 
    text-decoration: none; 
} 

#hero-content img { 
    display: block; 
    margin-top: 2px; 
    max-height: 145px; 
    margin-right: auto; 
    margin-left: auto; 
    margin-bottom: 53px; 
    padding: 5px; 
} 


<div class="sitrep"> 
<div class="alert-status"> 
<div class="info"> 
    <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> 
    <strong>Announcement!</strong> anouncment goes here. 
</div> 
</div> 
</div> 

<div id="siteHeader">my header</div> 

<!-- Hero Unit --> 
<div id="hero" class="hero"> 
    <div id="hero-content"> 
     <img src="content/images/logo-dt.png" class="img-responsive"> 
     <a class="button" role="button" href="#base">Learn more</a> 
    </div> 
</div>

來源

2016-10-02 Case

您正在CSS中使用'.sitrep'，它正在尋找sitrep作爲類。但是你使用sitrep作爲id。所以請嘗試在你的CSS中使用'＃sitrep'。應該明智地解決你的問題。 – Aer0

你混合起來class ES和ID的。

在您的HTML中，您將元素的ID設置爲sitrep，而您將樣式賦予類的的siterep。

嘗試以下任一選項，你會被設置：

更改元素屬性：<div id="sitrep">到<div class="sitrep">

更改CSS配合適當的元素：.sitrep {到#sitrep {

快樂編碼！

來源

2016-10-02 21:31:09 davewoodhall

仍然沒有解決問題 – Case

@DataDev你在你的HTML中有多個'sitrep'，在你的編輯中你只能用一個類替換其中的一個。也許改變另一個將解決你的問題。 – DBS

@DBS我已經更新了代碼，並重複檢查了它仍然是相同的結果警報不下推標題或英雄，它只是漂浮在標題上方 – Case

固定的div頁面破壞的結果

回答

相關問題