Question

我正在为一所学校设计一个网站，我希望像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;
}

我尝试了很多解决方案，但无论我做什么，标题都在页面后面。我希望菜单栏也可以修复，但它也是一样的......

Answer 1

将z-index：1000添加到#header css，并将padding-top添加到body css，这应该比标题的高度多一点。例如，如果标题的高度为40px，则将padding-top：50px放到body css中它应该可以工作。

Answer 2

当你为一个元素添加固定和/或绝对位置时，这意味着该元素将离开自然流，现在它属于与所有元素都具有自然流的层无关的“层”该文件。

这是一个很棒的功能，因为现在您可以将这些元素放在任何位置而不必担心页面的其余部分。

所以，关于你的情况。你选择了正确的位置，固定。现在它上面的元素看不到它，你必须手动添加这个标题元素的高度作为边距和/或填充到下一个元素的顶部。

例如，如果您有以下内容：

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

重复你所做的添加一个固定在标题上的位置，并考虑到它的高度是50像素，内容元素将得到一个填充顶部：50px，它应该可以做到这一点。

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

Answer 3

当您将一个元素设置为具有固定位置时，它将假定其他相邻元素不存在。为您要固定的元素指定更大的z-index。然后，为防止重叠，请为固定元素之后的元素提供与固定元素的高度相同的填充顶部。希望对您有所帮助。

Answer 4

CSS Z-index可能是您的解决方案

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

Answer 5

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

Answer 6

您可以使用 z-index

您希望在其他元素之前出现的元素，将z-index值设置为更高。

赞：

z-index: 300;//navbars

z-index: 0;//contents

位置固定后隐藏在内容后面的网站标题

6 个答案: