18

私は学校のウェブサイトをデザインしていますが、Facebook のようにサイトのヘッダーを修正したいと考えています。この質問で提供された修正をstackoverflowで試しましたが、ヘッダーではほとんど役に立ちませんでした。私は基本的に学校のロゴの画像を持っています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に追加し、パディングトップを本文の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

要素を固定配置に設定すると、隣接する他の要素が存在しないと見なされます。固定したい要素により大きな z-index を与えます。次に、重複を防ぐために、固定要素が先行する要素に、固定要素の高さと同じパディングトップを指定します。それが役に立てば幸い。

于 2018-06-25T17:56:20.437 に答える
1

CSSZ-indexがあなたの解決策かもしれません

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

于 2012-06-02T19:26:28.697 に答える