CSS：私はこのクラスを使用して固定されたトップヘッダに続くいる固定幅

Question

で固定し、トップのヘッダーを作成する方法：今

.sticky { 
    position: fixed; 
    width: 100%; 
    left: 0; 
    top: 0; 
    z-index: 100; 
    border-top: 0; 
} 

を、私は固定幅の840px、100％ではないがしたいとこのJSFiddle exampleのように中央に配置します。

Answer 1

.sticky { 
    position: fixed; 
    width: 840px; 
    margin-left: -420px 
    left: 50%; 
    top: 0; 
    z-index: 100; 
    border-top: 0; 
} 

これが解決策です。

Answer 2

あなたはtransform: translateX(-50%)を使用して、動的なソリューションを使用することができます - （demo on JSFiddleを）：（demo on JSFiddleを）私は、静的な解決策を使用することをお勧めしません

.sticky { 
    left:50%; 
    position:fixed; 
    top:0; 
    transform:translate(-50%); 
    width:840px; 
    z-index:100; 
} 

が、あなたはあまりにもそれを使用することができます。

.sticky { 
    left:calc(50% - 420px); 
    position:fixed; 
    top:0; 
    width:840px; 
    z-index:100; 
} 

なぜ静的なソリ​​ューションを避けるべきですか？

これのような多くの項目を定義してこれらの位置を設定できますが、将来的に幅を変更する場合は、CSS定義の静的部分も変更する必要があります。 CSSで静的な部分を使用することは完全に避けられませんが、最小限に抑えることができます！

Answer 3

あなたはこれを試してみましたか？

HTML：

<div class="sticky-container"> 
    <div class="nav sticky"> 
     Navigation 
    </div> 
    </div> 

CSS：

.sticky-container { 
    position: fixed; 
    width: 840px; 
    left: 50%; 
    top: 0; 
    z-index: 100; 
    border-top: 0; 
} 
.sticky { 
    position:relative; 
    left:-50%; 
    top:0; 
} 

Answer 4

あなたは以下にご.stickyクラスを変更した場合：

.sticky { 
    margin:auto; 
    width: 840px; 
    z-index: 100; 
    border-top: 0; 
} 

と体の上にその上の余白を削除します。

を

body { 
    margin: 0 0 0 0 !important; 
    padding: 0; 
}