CodeBase | Frontend

⚙️ Что такое свойство z-index в CSS и зачем оно используется?

z-index управляет порядком наложения элементов на странице. Чем больше значение — тем "выше" элемент расположен относительно других.

Работает только с элементами, у которых задано position (relative, absolute, fixed или sticky).

➡️ Пример:

<div class="box box1">Позади</div>
<div class="box box2">Поверх</div>

<style>
  .box {
    position: absolute;
    width: 200px;
    height: 100px;
    color: white;
    padding: 10px;
  }

  .box1 {
    background: #888;
    top: 50px;
    left: 50px;
    z-index: 1;
  }

  .box2 {
    background: #e74c3c;
    top: 80px;
    left: 80px;
    z-index: 2;
  }
</style>

🗣 В этом примере .box2 перекрывает .box1, потому что у неё z-index: 2.

CodeBase | Frontend | #CSS

Please open Telegram to view this post

VIEW IN TELEGRAM

www.tgoop.com/codebase_frontend/733

136 viewsJun 18 at 10:58

⚙️ Что такое свойство z-index в CSS и зачем оно используется?

z-index управляет порядком наложения элементов на странице. Чем больше значение — тем "выше" элемент расположен относительно других.

Работает только с элементами, у которых задано position (relative, absolute, fixed или sticky).

➡️ Пример:

<div class="box box1">Позади</div>
<div class="box box2">Поверх</div>

<style>
  .box {
    position: absolute;
    width: 200px;
    height: 100px;
    color: white;
    padding: 10px;
  }

  .box1 {
    background: #888;
    top: 50px;
    left: 50px;
    z-index: 1;
  }

  .box2 {
    background: #e74c3c;
    top: 80px;
    left: 80px;
    z-index: 2;
  }
</style>