CSSページレイアウト - フォアグラウンド "オーバーレイ"バックグラウンド

Question

私は最近、Webアプリケーションの開発に精通し、基本的なCSSレイアウトの質問に苦労し始めました。

希望のレイアウトは、いくつかの背景要素をオーバーラップさせる中央領域です。 こちらをご覧ください：

この画像は任意のレイアウトを示しています。

を私はまたcodepenでそれをハッキングしている：私は、中央領域の周りの背景を構築するために、HTMLのdivタグを使用し Codepen
。

<div class="page-element"> 
<div class="element-side"></div> 
<div class="element-middle"></div> 
<div class="element-side"></div> 
</div> 

とCSSそのようにそれを配置します

.page-element { 
    display: flex; 
} 
.element-middle { 
    width: 90%; 
} 
.element-side { 
    flex: 1; 
} 

しかし、私はそこにそれをやった方法はdoesn't適切なレイアウトスタイルのように見えます。

このようなレイアウトを行う現代CSSの正しい方法は何ですか？

Answer 1

あなたの構造のほとんどは大丈夫ですので、私はそれを保ち、大きな変化右/左ガターとヘッダ/フッタのオーバーフローを作成する方法です。

私は単にsideの要素を削除し、width: 90%のままにして、margin: 0 autoを使って、中央に物事を水平にするようにしました。擬似は、それらが重ならないので、私は、below-nav/footer1に要素を除去（のみCSSを用いて行う）、主に擬似要素を追加し、ヘッダ/フッタに余分なトップ/ボトムのパディングヘッダ/フッタオーバーフロー

コンテンツ。当然のpadding-top: 4em;缶で

.nav1, .nav2, .nav1 > div { 
 
    display: flex; 
 
    background: #f05d23; 
 
} 
 
.nav-elem { 
 
    flex: 1; 
 
} 
 
.nav1 > div, .nav2 > div { 
 
    margin: 0 auto;    /* added, center horiz. */ 
 
    width: 90%; 
 
    text-align: center; 
 
    padding: 1em; 
 
    box-sizing: border-box; 
 
} 
 
.nav2 > div { 
 
    padding-bottom: 3em;   /* added, avoid overlap */ 
 
} 
 

 
.main { 
 
    position: relative; 
 
    display: flex; 
 
    background: #e4e6c3; 
 
} 
 
.main::before, .main::after { /* added, create overflow */ 
 
    content: ''; 
 
    position: absolute; 
 
    left: 5%; 
 
    width: 90%; 
 
    height: 3em; 
 
    background: #f7f7f2; 
 
} 
 
.main::before { 
 
    top: 100%; 
 
} 
 
.main::after { 
 
    bottom: 100%; 
 
} 
 
.main section { 
 
    margin: 0 auto;    /* added, center horiz. */ 
 
    width: 90%; 
 
    padding: 1em; 
 
    box-sizing: border-box; 
 
    background: #f7f7f2; 
 
} 
 

 
.footer { 
 
    display: flex; 
 
    background: #2d2a32; 
 
} 
 
.footer section { 
 
    margin: 0 auto;    /* added, center horiz. */ 
 
    width: 90%; 
 
    padding: 1em; 
 
    padding-top: 4em;   /* added, avoid overlap */ 
 
    box-sizing: border-box; 
 
    text-align: center; 
 
    color: #f7f7f2; 
 
} 
 

 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
h1, h2 { 
 
    font: bold 2em Sans-Serif; 
 
    margin: 0 0 1em 0; 
 
} 
 
h2 { 
 
    font-size: 1.5em; 
 
} 
 
p { 
 
    margin: 0 0 1em 0; 
 
}

<div class="nav1"> 
 
    <div> 
 
    <div class="nav-elem"><a href="#">Plan</a></div> 
 
    <div class="nav-elem"><a href="#">AdminPlan</a></div> 
 
    <div class="nav-elem"><a href="#">Help</a></div> 
 
    <div class="nav-elem"><a href="#">Login</a></div> 
 
    </div> 
 
</div> 
 
<div class="nav2"> 
 
    <div> 
 
    <h1>Pageheader.</h1></div> 
 
</div> 
 

 
<div class="main"> 
 
    <section> 
 
    <h1>Main Content</h1> 
 
    <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by 
 
     arches into stiff sections.</p> 
 
    <p>The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought. It wasn't a dream.</p> 
 
    <p>His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had 
 
     recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then 
 
     turned to look out the window at the dull weather. Drops</p> 
 
    </section> 
 
</div> 
 

 
<div class="footer"> 
 
    <section> 
 
    <h2>Footer</h2> 
 
    <p>Whatever goes into a page </p> 
 
    </section> 
 
</div>

---

注意、.footer sectionのパディング値は次のように既存の短縮形プロパティに追加する：padding: 4em 1em 1em;（/* top | horizontal | bottom */）

Answer 2

これを実現する方法の例を示します - 申し訳ありませんが、携帯電話では入力しています。

https://jsfiddle.net/su5w1595/

.wrapper { 
Position: absolute; 
Height:100%; 
Width:100%; 
} 
.top { 
Position:relative; 
Background-color:blue; 
Width:100%; 
Height:30%; 
} 
.middle { 
Position:relative; 
Background-color:red; 
Width:100%; 
Height:30%; 
} 
.footer { 
Position:relative; 
Background-color:yellow; 
Width:100%; 
Height:30%; 
} 
.main { 
Position:absolute; 
Top:20%; 
Left:10%; 
Height: 60%; 
Width:80%; 
Margin:auto; 
Background-color: white; 
}