18

我正在为一所学校设计一个网站，我希望像 facebook 一样修复网站的标题。我在stackoverflow上尝试了this question提供的修复，但它在标题中几乎没有任何用处。我有一张图片，基本上是学校的标志，我在哪里做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;
}

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

4

6 回答 6

39

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

于 2012-06-02T19:27:11.733 回答
11

当您将位置固定和/或绝对添加到元素时，这意味着该元素将离开自然流，现在它属于与所有元素所在的层无关的“层”与文档的自然流.

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

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

例如，如果您有以下情况：

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

重复你所做的添加一个固定到标题的位置，并考虑到它的高度是 50 px，内容元素将得到一个 padding-top:50px 并且它应该可以解决问题。

   <style>
   .header{position:fixed;top:0;height:50px;}
   .content{padding-top:50px;}
   </style>
于 2013-10-03T05:01:12.690 回答
2

当您将 an 元素设置为具有固定定位时，它假定其他相邻元素不存在。为要修复的元素提供更大的 z-index。然后为了防止重叠，给固定元素前面的元素与固定元素的高度相同的 padding-top。希望能帮助到你。

于 2018-06-25T17:56:20.437 回答
2

您可以使用z-index

您希望哪个元素位于其他元素之前，将 z-index 值设置得更高。

像这样：

z-index: 300;//navbars

z-index: 0;//contents
于 2020-08-10T16:25:38.113 回答
1

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

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

于 2012-06-02T19:26:28.697 回答
1 
 #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-03T04:13:42.360 回答