divの上に別のdivがあり、隣にdiv

Question

私は検索して同様のケースを見つけましたが、まったく同じではなく、CSSではうまくいきません。

私はお互いに隣に4つのdivがあり、これらのdivのそれぞれの上に別のdivが必要です。私はwidthを設定しようとしましたが、position、display divを別々に変更しましたが、正しい結果が得られませんでした。

あなたはここに上で、私のコードを見ることができます： https://jsfiddle.net/Zmitas/y9kk9kvt/

これまでのところ、私は隣同士にそれらを得ることができたが、私は「ステップ」の外観を修正するために管理していませんでした。あなたは出力を期待何をすべきか、すべての答えを

おかげ

Answer 1

更新css&HTML

#one { 
 
    width: 100%; 
 
    height: 600px; 
 
    background-color: #333; 
 
    float: left; 
 
} 
 
#two { 
 
    width: 100%; 
 
    height: 600px; 
 
    float: left; 
 
    background-color: #666; 
 
} 
 
#three { 
 
    width: 100%; 
 
    height: 600px; 
 
    float: left; 
 
    background-color: #333; 
 
} 
 
#four { 
 
    width: 100%; 
 
    height: 600px; 
 
    background-color: #666; 
 
    float: left; 
 
} 
 
.above { 
 
    position: relative; 
 
    width: 25%; 
 
    float: left; 
 
}

<div class="above"> 
 
    <div>text above</div> 
 
    <div id="one">Div one</div> 
 
</div> 
 

 
<div class="above"> 
 
    <div>text above</div> 
 
    <div id="two">Div two</div> 
 
</div> 
 

 
<div class="above"> 
 
    <div>text above</div> 
 
    <div id="three">Div three</div> 
 
</div> 
 

 
<div class="above"> 
 
    <div>text above</div> 
 
    <div id="four">Div four</div> 
 
</div>