Как расположить один div над другим?

Question

[Foxford12]

Мне надо что-бы 2 блока div стали как на рисунке, как это сделать?

index.html

<section class="section">
        <div class="section-block-one">
            <div class="section-block-two">
                
            </div>
        </div>
    </section>

style.css

.section {
    padding: 10px;
    background-color: #010915;
}

.section-block-one {
    height: 90vh;
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 50px 100px 100px 50px;
    justify-content: center;
    align-items: center;
    background-color: #1c344b;

}

.section-block-two {
    width: 100%;
    height: 90vh;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    justify-content: center;
    align-items: center;
    background-color: white;
}

Comments

[Максим]

Первый блок position relative overflow hidden width 100%
Второй блок position absolute right 0 top 50% transform: translateY -50%

[Ankhena]

Вам нужно, чтобы второй блок был прибит к правому краю первого. А по вертикали по центру.

Так зачем вы пишете в стилях, поставь по центру по вертикали и по центру по горизонтали?? Логика-то где?
Откуда у второго ширина 100%? Почему у двух блоков задана одинаковая высота, если на картинке один по центру другого?

Если внутри синего есть ещё какое-то содержимое, то нужно показывать всю задачу целиком.

Answer 1

[Alexander Bashkin]

.section {
     padding: 10px;
     background-color: #010915;
     height: 90vh;
}
 .section-block-one {
     height: 100%;
     display: flex;
     justify-content: flex-end;
     align-items: center;
     background-color: #1c344b;
}
 .section-block-two {
     width: 200px;
     height: 200px;
     background-color: white;
}

Answer 2

[Вячеслав]

https://developer.mozilla.org/ru/docs/Web/CSS/z-index