Div над другим div и рядом друг с другом

Question

Я искал и нашел аналогичные случаи, но не совсем то же самое, и я не текуч в CSS.

У меня есть четыре divs рядом друг с другом, и мне нужен еще один div над каждым из этих div. Я попытался установить width, изменить position, display divs по-разному, но я не получил правильный результат.

Вы можете увидеть мой код здесь: https://jsfiddle.net/Zmitas/y9kk9kvt/

До сих пор мне удалось получить их рядом друг с другом, но мне не удалось зафиксировать «шаги» внешний вид.

Спасибо за все ответы

Answer 1

Updatecss&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>