固定ヘッダーの上にコンテンツを表示するCSS

Question

固定ヘッダーの上にコンテンツを表示するにはどうすればよいですか？

ソーシャルサイトへのリンクがいくつか表示されるメインのナビゲーションヘッダーの上に「外部ヘッダー」を作成するだけです。

私はHTMLマークアップを作成しましたが、CSSを使用してこれを視覚的に翻訳することはできません。

コードは以下のとおりです。codepenをご覧ください。

基本的に、私はsocial ul with list items 1,2,3 & 4がグローバルナビゲーション

* { 
 
    box-sizing: border-box; 
 
} 
 

 
ul, 
 
ol { 
 
    list-style: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
.header { 
 
    position: fixed; 
 
    width: 100%; 
 
    top: 0; 
 
    border-bottom: 1px solid #ddd; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-justify-content: space-between; 
 
    justify-content: space-between; 
 
} 
 

 
.menu li { 
 
    padding-right: 50px; 
 
    margin-right: 20px; 
 
} 
 

 
.header .menu ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.header .menu ul li { 
 
    display: inline-block; 
 
    list-style: none; 
 
} 
 

 
.header .menu ul li a { 
 
    text-decoration: none; 
 
    display: block; 
 
    padding: 30px 20px; 
 
}

<div id="global-social" class="outer-header col-1"> 
 
    <div class="container"> 
 
    <nav> 
 
     <ul class="social"> 
 
     <li>1</li> 
 
     <li>2</li> 
 
     <li>3</li> 
 
     <li>4</li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</div> 
 
<div id="global-navigation"> 
 
    <!-- Global Header --> 
 
    <header class="header"> 
 
    <div class="logo"> 
 
     <a href=""> 
 
     <!--<img src="images/rare-logo.png">--> 
 
     <h1>Rare Select</h1> 
 
     </a> 
 
    </div> 
 
    <nav class="menu"> 
 
     <ul> 
 
     <li><a href="">HOME</a></li> 
 
     </ul> 
 
    </nav> 
 
    </header> 
 
</div>

Answer 1

私はそれが高さだとダウン等しいヘッダを動かす助言するので、あなたのヘッダがfixed位置を使用している上になりたいです（高さが変わらなければ）EG 80pxこの場合。

.header { 
    top: 80px; 
} 

* { 
 
    box-sizing: border-box; 
 
} 
 

 
ul, 
 
ol { 
 
    list-style: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
.header { 
 
    position: fixed; 
 
    width: 100%; 
 
    top: 80px; 
 
    border-bottom: 1px solid #ddd; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-justify-content: space-between; 
 
    justify-content: space-between; 
 
} 
 

 
.menu li { 
 
    padding-right: 50px; 
 
    margin-right: 20px; 
 
} 
 

 
.header .menu ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.header .menu ul li { 
 
    display: inline-block; 
 
    list-style: none; 
 
} 
 

 
.header .menu ul li a { 
 
    text-decoration: none; 
 
    display: block; 
 
    padding: 30px 20px; 
 
}

<div id="global-social" class="outer-header col-1"> 
 
    <div class="container"> 
 
    <nav> 
 
     <ul class="social"> 
 
     <li>1</li> 
 
     <li>2</li> 
 
     <li>3</li> 
 
     <li>4</li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</div> 
 
<div id="global-navigation"> 
 
    <!-- Global Header --> 
 
    <header class="header"> 
 
    <div class="logo"> 
 
     <a href=""> 
 
     <!--<img src="images/rare-logo.png">--> 
 
     <h1>Rare Select</h1> 
 
     </a> 
 
    </div> 
 
    <nav class="menu"> 
 
     <ul> 
 
     <li><a href="">HOME</a></li> 
 
     </ul> 
 
    </nav> 
 
    </header> 
 
</div>

Answer 2

あなたは両方のメニューが固定滞在したい場合は、私は（私はこれをクラスwrapperを与えてくれた下のスニペットに）新しいコンテナの両方でそれらをラップすることをお勧めしたいです。

代わりにpositionプロパティをこのクラスに追加します。

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.wrapper { 
 
    position: fixed; 
 
    width: 100%; 
 
    top: 0; 
 
    border-bottom: 1px solid #ddd; 
 
} 
 

 
ul, 
 
ol { 
 
    list-style: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
.header { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-justify-content: space-between; 
 
    justify-content: space-between; 
 
} 
 

 
.menu li { 
 
    padding-right: 50px; 
 
    margin-right: 20px; 
 
} 
 

 
.header .menu ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.header .menu ul li { 
 
    display: inline-block; 
 
    list-style: none; 
 
} 
 

 
.header .menu ul li a { 
 
    text-decoration: none; 
 
    display: block; 
 
    padding: 30px 20px; 
 
}

<div class="wrapper"> 
 
    <div id="global-social" class="outer-header col-1"> 
 
    <div class="container"> 
 
     <nav> 
 
     <ul class="social"> 
 
      <li>1</li> 
 
      <li>2</li> 
 
      <li>3</li> 
 
      <li>4</li> 
 
     </ul> 
 
     </nav> 
 
    </div> 
 
    </div> 
 
    <div id="global-navigation"> 
 
    <!-- Global Header --> 
 
    <header class="header"> 
 
     <div class="logo"> 
 
     <a href=""> 
 
      <!--<img src="images/rare-logo.png">--> 
 
      <h1>Rare Select</h1> 
 
     </a> 
 
     </div> 
 
     <nav class="menu"> 
 
     <ul> 
 
      <li><a href="">HOME</a></li> 
 
     </ul> 
 
     </nav> 
 
    </header> 
 
    </div> 
 
</div>