divを先頭から始める方法

Question

メニューバーを作成してから、画像スライダ用のdivを1つ作成しますが、メニューバーの下から開始します。私はこのdivをページ上部から始めたいと思っています。私はそれを一番上に置くためにマージンを使いますが、マージンは良い方法ではないと思います。別の方法を提案してください。

これは私がこのページの最上部

<div id="container"> 

</div> 

CSS

#container{ 
    width: 100%; 
    height: 704px; 
    overflow: hidden; 
    background: #ff00ff; 
} 

から開始するDIVたい私のメニューバーコード

<header> 
    <div class="top_nav"> 
    <div class="logo"> 
     <a id="site-logo" href="#"><img src="#" alt="ETSSQUARE LOGO"></a> 
     </div> 
     <div class="contact_details"> 
      <p>Need Help, Call: +92 445676654 |<a href="#"> Mail</a></p> 
     </div> 
     <div class="nav_bar"> 
      <ul> 
       <li><a href="#">Services</a></li> 
       <li><a href="#">Solution</a></li> 
       <li><a href="#">Support</a></li> 
       <li><a href="#">Partners</a></li> 
       <li><a href="#">Contacts</a></li> 
      </ul> 
     </div> 
    </div> 
</header> 

メニューバーのCSS

.nav_bar{ 
    margin-left: 700px; 
    margin-top: 45px; 
    position: absolute; 
} 

.nav_bar ul{ 
    list-style-type: none; 
} 

.nav_bar ul li{ 
    display: inline-block; 
    text-align: center; 
    float: left; 
} 

.nav_bar ul li a{ 
    text-decoration: none; 
    padding: 12px; 
    margin: 8px; 
    font-size: 20px; 
    color: #fff; 
    position: relative; 
} 

.nav_bar ul li a::after{ 
    content: ''; 
    display: inline-block; 
    position:absolute; 
    width: 0px; 
    height: 4px; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    background: #ff6600; 
    transition: width .4s; 
} 

.nav_bar ul li a:hover::after{ 
    content: ''; 
    display: inline-block; 
    position:absolute; 
    width: 0px; 
    height: 4px; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    background: #ff6600; 
    width: 100%; 
} 

です

Answer 1

あなたのナビゲーションを修正することができ、次に#containerが先頭から始まります。

.nav_bar { 
    position: fixed; 
    right: 0; 
    left: 0; 
    top: 0; 
    z-index:999; 
} 

希望すると、これが役立ちます。