CSS устанавливает дочернюю позицию поверх родительской ⇐ CSS

[Anonymous]

Я хотел бы создать изображение ниже, используя HTML и CSS.

Изображение ниже — это результат реализации кода, который я реализовал.

Как вы могли заметить, мне не удалось разместить синюю карточку поверх родительской и переместить ее вправо.
Несмотря на то, что я установил для родительского элемента относительный, а для дочернего элемента – абсолютный, когда я его перемещаю, он смещается внутри родительского элемента.
< div class="snippet">

Код: Выделить всё

body {
font-family: sans-serif;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
}

.card-top {
width: 70%;
height: 10px;
background-color: red;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}

.card-center {
width: 90%;
height: 300px;
background-color: #fff;
border-radius: 20px;
position: relative;
overflow: hidden;
border-style: solid;
border-color: #FF9696;
padding: 20px;
}

.card-center::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 20px;
background-color: red;
z-index: -1;
/*opacity: 0.2;*/
}

.card-center-left {
width: 50px;
height: 150px;
background-color: pink;
position: absolute;
left: 0;
top: 50%;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
transform: translateY(-50%);
}

.card-center-right {
width: 50px;
height: 100px;
background-color: blue;
position: absolute;
right: 0px;
top: 50%;
transform: translateY(-50%);
z-index: 999;
}

.card-bottom {
width: 70%;
height: 10px;
background-color: red;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}

Код: Выделить всё

SAMPLE TEXT

Подробнее здесь: https://stackoverflow.com/questions/793 ... eir-parent