CSSをレイヤーに並べる

Question

下のHtmlは、古いWebサイトからテーブルに保持されたイメージから純粋なCSSに（または私が得る限り）変換する必要があるレイアウトの更新バージョンを示しています。下部の

<div id="mainContainer"> 
    <div class="topnav"> 
     <a href="#about"><span class="LpTopLink">Link4</a> 
     <a href="#contact"><span class="ETopLink">Link3</a> 
     <a href="#news"><span class="YpTopLink">Link2</a> 
     <a href="#home"><span class="HTopLink">Home</a> 
    </div> 
    <h1 class="titleA">Aspir...<span class="titleB">Fut...</span></h1> 
<div id="videoBox"> 
    <p> <span class="welcome">Welcome...<span></p> 
<p class="filmpar"> 
<a id="activator"><img src="images/Film-2.png" class="film"></a> 
Lots of text to do with the project, over 4 or five lines, with an image and some decorative text links...</p> 
<div id="activator2"> 
<div id="filmtxt"> link to film... </div> 
</div> 
</div> 
</div> 
<div id="page-wrapBody"> 
    <div class="div" id="one"></div> 
    <div class="div" id="two"></div> 
    <div class="div" id="three"></div> 
</div> 

3色のボックスは、（レイヤ3）の下でなければなりませんが、私は下にスライドさせ、上に座ってそれらを得るように見えることはできません（レイヤ3）

以下はCSSのリンクです;最初はvideoBox用で、もう1つはwrapBody用です。 wrapBodyには、3つの色付きボックスの詳細が含まれています。

#videoBox { 
    font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif; 
    float: right; 
    display: block; 
    border: solid 6px; 
    border-color: white; 
    border-radius: 25px; 
    color: black; 
    margin-top: -37; 
    text-align: left; 
    padding: 8px 26px; 
    text-decoration: none; 
    font-size: 17px; 
    background: -webkit-linear-gradient(#f5991c, #f5be74); 
    background-image: -ms-linear-gradient(#f5991c, #f5be74); 
    box-shadow: 0 7px 6px #cac9c8; 
    z-index:10; 
} 

wrapBody着色ボックス

#page-wrapBody 
    { 
    width: 800px; 
    margin: 80px auto; 
    padding: 20px; 
    border-radius: 25px; 
    background: white; 
    -moz-box-shadow: 0 0 15px grey; 
    -webkit-box-shadow: 0 0 20px black; 
    box-shadow: 0 0 15px grey; 
    z-index:2; 
    } 
    .div 
    { 
     display:inline-block; 
     width:33%; 
     height:100%; 
     margin-top: -60px; 
     z-index:3; 
    } 
    #one { 
    background: -webkit-linear-gradient(#ddffcc, #fff); 
    background-image: -ms-linear-gradient(#ddffcc, #fff); 
    } 
    #two { 
    background: -webkit-linear-gradient(#ffccd4, #fff); 
    background-image: -ms-linear-gradient(#ffccd4, #fff); 
    } 
    #three { 
    background: -webkit-linear-gradient(#ccdeff, #fff); 
    background-image: -ms-linear-gradient(#ccdeff, #fff); 
    } 

画像が表示されている場合、このコードが生成するものを示したが、私はvideoBox（レイヤ3）の下に座ってシャドウ効果を維持するために着色されたボックスを必要とします。どんな助けもありがとう！

Answer 1

z-インデックスを使用するには、positionプロパティも使用する必要があります。

（強調鉱山）

z屈折率のCSSプロパティは位置決め要素およびその子孫のz順序を指定します。要素が重なっている場合は、どちらが他の要素をカバーするかを決定します。より大きなz-インデックスを有する要素は、一般に、より低い要素をカバーする。

[...]配置ボックスについて

（すなわち、を有するもの静的以外の任意の位置である）、Z-indexプロパティを指定：の

1. スタック・レベルを現在のスタッキングコンテキストのボックス。
2. ボックスがローカルスタッキングコンテキストを確立するかどうか。

_{z-index | MDN}

あなたが作る必要があります変更が#videoBoxです。 z-indexを使用している場合でも、同じ変更を加えることは害ではありません。しかし、技術的には、調整する必要があります。

#videoBox { 
    ... 
    z-index:10; 
    position: relative; // add this line 
} 

Here is a rough example

---

あなたのコードにコメント、あなたはライン3-6に閉じられていない<span>タグを持っているように見えます。このようにしておくと、問題が発生する可能性があります。