html - コンテナ内で分割して、コンテナの幅よりも広い幅にします

Question

ページ上にブラウザの幅と同じ幅のトップバーが必要です。問題は、それがコンテナdiv内にあることです。コンテナから引き出すと、divを本体の幅まで拡張できますが、コンテナ内にある場合は、コンテナの幅までしか拡張できません。

コンテナdivを超えてトップバーを拡張できるソリューションはありますか？

<div id="container">
     <div id="topBar">
         <p>The Paragraph</p>
     </div>
</div>

Answer 1

#topBar絶対値をその直接の親に対して相対的なものにすることなく配置できます

html, body {
    height: 2000px;
}

#container {
    width: 50%;
    margin: auto;
    height: 200px;
    background: beige;
}

#topBar {
    position: absolute;
    left: 0;
    background: #ccc;
    width: 100%;
}

デモ

Answer 2

もう1つの可能性は、position：absoluteを使用してドキュメントフローから削除することです。ただし、topBarの高さを知る必要があり、コンテンツの残りの部分に上マージンを強制してtopBarより下に保つことで補正する必要があります。

たとえば、次のことができます。

#topBar {
    position:absolute; /* fixed might also work, here */
    top:0; left:0;
    width:100%;
    height:50px;
}

ただし、次のものも必要です。

#container {
    margin-top:50px; /* or more */
}

ただし、＃containerposition:absoluteまたはを作成する必要がある場合、これは機能しなくなりますposition:relative。