Свойства CSS: как свойство z-index определяет z-порядок элемента

Перейти на страницу упражнения

Решение:

HTML-код:

      Как свойство z-index определяет z-порядок элемента   div {ширина: 100 пикселей;  высота: 100 пикселей;  отступ: 20 пикселей;  } .w3r1, .w3r2, .w3r3, .w3r4 {позиция: абсолютная;  } .w3r1 {фон: # ccff00;  контур: 5px solid # 9900CC;  верх: 100 пикселей;  слева: 200 пикселей;  z-индекс: 10;  } .w3r2 {фон: # 0f0fcc;  контур: 5 пикселей сплошной # fff0CC;  верх: 50 пикселей;  слева: 75 пикселей;  z-index: 100;}. w3r3 {фон: # cc00ff; контур: 5 пикселей твердый # 660066; верх: 125 пикселей; слева: 25 пикселей;  z-индекс: 150;  } .w3r4 {фон: # 00ffcc;  контур: 5 пикселей сплошной # FF0099;  верх: 200 пикселей;  слева: 350 пикселей;  z-индекс: 50;  }    

Учебник по w3resource

w3resource 1. z-index 10
w3resource 2. z-index 100
w3resource 3. z-index 150
w3resource 4. z-index 50

Живая демонстрация:

См. перо z -index-answer от w3resource (@ w3resource) на CodePen.


Посмотреть решение в браузере

Поддерживаемый браузер

Да Да Да Да Да

Перейти на страницу упражнений

Оцените статью
nanomode.ru
Добавить комментарий