Как сделать слои в css

Вы можете создать слои с помощью CSS, используя свойство position и комбинации свойств top, right, bottom, left. Вот пример, как можно создать слои:

HTML:

<div class="wrapper">
  <div class="layer layer1"></div>
  <div class="layer layer2"></div>
  <div class="layer layer3"></div>
</div>

CSS:

.wrapper {
  position: relative;
  width: 400px;
  height: 400px;
}

.layer {
  position: absolute;
  width: 100%;
  height: 100%;
}

.layer1 {
  background-color: yellow;
  top: 0;
  left: 0;
}

.layer2 {
  background-color: blue;
  top: 50px;
  left: 50px;
}

.layer3 {
  background-color: green;
  top: 100px;
  left: 100px;
}

Здесь мы создали три слоя с помощью элементов <div>. Родительскому элементу .wrapper мы задали свойство position: relative, чтобы создать основу для слоев. С помощью свойства position: absolute мы определили, что каждый из слоев будет позиционироваться абсолютно внутри родительского элемента. Свойствами top, right, bottom и left мы задали конкретные координаты для каждого слоя.

Обратите внимание, что слои располагаются друг над другом в порядке их объявления в HTML и CSS. Если вы хотите изменить порядок слоев, вам нужно изменить их порядок в HTML или использовать свойство z-index.

Вы можете изменять цвета, размеры и позиции слоев, а также добавлять другие свойства, чтобы создавать интересные разноуровневые дизайны.