web-dev-qa-db-ja.com

位置が固定されている場合、Webサイトのヘッダーがコンテンツの後ろに隠れます

私は学校のウェブサイトをデザインしていて、フェイスブックのようにサイトのヘッダーを修正したいです。私はスタックオーバーフローで 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;
}

私はそれにいくつかの解決策を試しましたが、私が何をしても、ヘッダーはページの後ろにあります。メニューバーも修正したいのですが同じです...

csscss-position
14
thewhitetulip

#header cssにz-index：1000を追加し、body cssにpadding-topを追加します。これは、ヘッダーの高さより少し高くする必要があります。たとえば、ヘッダーの高さが40pxの場合は、body cssにpadding-top：50pxを配置すると機能します。

32
vivek

要素に固定または絶対位置を追加すると、要素は自然な流れを離れ、すべての要素がドキュメントの自然な流れにあるレイヤーに関連しない「レイヤー」に属します。 。

ページの残りの部分を気にすることなく、これらの要素をどこにでも配置できるようになったので、これは優れた機能です。

だから、あなたのケースについて。あなたは正しい位置を選び、修正しました。これで上の要素には表示されなくなり、このヘッダー要素の高さを次の要素の上部にマージンまたはパディングとして手動で追加する必要があります。

たとえば、次の場合：

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

あなたがしたことを繰り返すと、ヘッダーに固定された位置を追加し、その高さが50ピクセルであることを考慮すると、コンテンツ要素はpadding-top：50pxを取得し、トリックを実行するはずです。

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

要素の位置を固定するように設定すると、隣接する他の要素が存在しないと見なされます。修正する要素に大きなZインデックスを指定します。次に、重複を防ぐために、固定要素の前の要素に、固定要素の高さと同じパディングトップを指定します。それが役に立てば幸い。

2
Vik
 #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;
    }
1
shriganth

CSS Z-indexがあなたのソリューションかもしれません

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

1
thedrs