помогите с позицией элемента наклад на друг друга

Question

Нам нужно создать два блока <div, каждый с двумя абзацами и разным цветом фона. Примените свойство абсолютного положения к первому элементу <div и свойство относительного положения ко второму элементу div. Расположите элементы так, чтобы они перекрывали друг друга. Сделайте так, чтобы первый элемент перекрывался вторым. Я пробовал это сделать, но в моем случае второй элемент накладывается на первый, а не наоборот.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>TASK-2</title>
    <style type="text/css">
        .header {
            position: absolute;
            width: 150px;
            height: 100px;
            border: 1px solid black;
            background-color: green;
        }

        .eve {
            position: relative;
            top: 40px; left: 40px;
            width: 150px;
            height: 100px;
            border: 1px solid black;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="header">Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Laborum, debitis provident nemo?</div>
    <div class="eve">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
</body>
</html>

Answer 1

Нужно было просто задать z-index обоим блокам =)

.header{
position: absolute;
width: 150px;
height: 100px;
border: 1px solid black;
background-color: green;
z-index: 5;
}

.eve {
position: relative;
top: 40px; left: 40px;
width: 150px;
height: 100px;
border: 1px solid black;
background-color: yellow;
z-index: 4;
}

 <div class="header">Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Laborum, debitis provident nemo?</div>
    <div class="eve">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>

БЛОГ НА HUSL

помогите с позицией элемента наклад на друг друга

Ответы (1 шт):