當位置固定時隱藏在內容後面的網站標題

我正在爲一所學校設計一個網站，並且我希望網站頭部像Facebook那樣得到修復。我試過在stackoverflow上提供的this問題所提供的修復，但它在頭文件中幾乎沒有任何用處。我有一個圖像，基本上是學校的標誌，我在那裏做position: fixed，但是頁眉隱藏在頁面後面。當位置固定時隱藏在內容後面的網站標題

HTML：

<body> 
    <div id="header" > <img src="images/iesheader_nnew1.jpg" /></div> 

    <div id="menu"> 
     <ul> 
      <li><a href="index.html"><abbr title="Home">Home&nbsp;&nbsp;</abbr></a></li> 
      <li><a href="aboutus.html"> <abbr title="About Us">About Us&nbsp;&nbsp;</abbr> </a></li> 
      <li><a href="acad.html"><abbr title="Academics">Academics</abbr></a></li> 
      <li><a href="admin.html"><abbr title="Administration">Administration</abbr></a></li> 
      <li><a href="news.html"><abbr title="News">News</abbr></a></li> 
      <li><a href="contact.html"><abbr title="Contact Us">Contact Us</abbr> </a></li> 
      <li><a href="photo.html"><abbr title="Photo Gallery">Photo Gallery</abbr> </a></li> 
     </ul>  
     <div class="cleaner"></div> 
    </div>

CSS：

#header { 
    margin-left: 0px; 
    width: auto; 
    height: 90px; 
    padding: 0px; 
    padding-left:185px; 
    font-size: 35px; color:#FFFFFF; 
    background-color: #f6c491; 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
} 
#menu { 
    position: relative; 
    clear: both; 
    width: auto; 
    height: 38px; 
    padding: 0; 
    padding-left:185px; 
    background-color:#FFFFFF; 
    margin-bottom: 10px; 
    margin-left:0px; 
} 

#menu ul { 
    float: left; 
    width: 960px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

#menu ul li { 
    padding: 0px; 
    margin: 0px; 
    display: inline; 
} 

#menu a { 
    float: left; 
    display: block; 
    padding: 8px 20px; 
    font-size: 14px; 
    font-weight: bold; 
    text-align: center; 
    text-decoration: none; 
    color: #000; 
    outline: none; 
    border: none; 
    border-top: 3px solid black; 
}

我嘗試了一些該解決方案，但無論我做什麼，頭轉到後面的頁面。我想在菜單欄也被固定的，但它也是一樣的...

來源

2012-06-02 lucifer

這即使用olders不支持 –

@Bipin其實我使用的是最新的穩定瀏覽器的固定位置的瀏覽器U：鉻20 IE 9和Safari 5.6 – lucifer

添加的z-index：1000到的#header CSS ，並添加填充頂部的身體CSS這應該是比標題的高度多一點。例如，如果標題的高度是40px，那麼將padding-top：50px放到body css中，它應該可以工作。

來源

2012-06-02 19:27:11 vivek

我這樣做，但做起來後，我的頭現在是上面的其餘的內容！所以用戶只會看到標題而沒有任何其他內容 – lucifer

您可以將padding-top添加到正文css中，這應該比標題的高度稍微多一點。例如，如果標題的高度是40px，那麼將padding-top：50px放到body css中，它應該可以工作。 – vivek

感謝它的工作:) – lucifer

CSS的z-index可能是您的解決方案

http://www.w3schools.com/cssref/pr_pos_z-index.asp

來源

2012-06-02 19:26:28 thedrs

#header { 
     margin-top:-38px; //solution 
     margin-left: 0px; 
     width: auto; 
     height: 90px; 
     padding: 0px; 
     padding-left:185px; 
     font-size: 35px; 
     color:#FFFFFF; 
     background-color: #f6c491; 
     position: fixed; 
     top: 0; 
     left: 0; 
     right: 0; 
    }

來源

2013-10-03 04:13:42 shriganth

當添加位置固定和/或絕對的元件，這意味着elemet將離開的自然流動和現在它屬於不相關到其中所有的元素是該層「層」與文件的自然流動。

這是一個很棒的功能，因爲現在您可以將這些元素放置在任何位置，而無需擔心頁面的其他部分。

所以，關於你的情況。你選擇了正確的位置，固定。現在上面的元素不會看到它，並且您必須手動將此頭元素的高度作爲邊距和/或填充添加到下一個元素的頂部。

例如，如果你有以下幾點：

<div class="header"></div> 
    <div class="content"></div>

重複你確實添加了固定頭，並考慮到它的高度爲50像素的內容元素將得到填充，頂部的什麼位置：50像素和它應該做的伎倆。

<style> 
    .header{position:fixed;top:0;height:50px;} 
    .content{padding-top:50px;} 
    </style>

來源

2013-10-03 05:01:12

感謝分享，似乎你是唯一一個給出了有意義的答案...你有任何參考：...它屬於「層」，是不相關的層... – MSardelich

就好像元素的自然流動是由css決定的元素的流動。當然你可以用z-index來控制它。我稱之爲layer，即由每個z-index值規定的二維計劃。 –

當位置固定時隱藏在內容後面的網站標題

回答

相關問題