ITVDN logo
Видеокурсы по
программированию

Доступ более чем к 7700 видеоурокам от $19.99

Подписка
ITVDN logo
Видеокурсы по
программированию

Доступ более чем к 7700 видеоурокам от $19.99

Подписка

Введение

В данной статье с помощью некоторых примеров мы научим Вас использовать свойство CSS: Z-index.


Z-index используется для стабилизации порядка элементов, которые перекрываются.

Z-Index является важным свойством CSS. Оно указывает на уровень элемента в стеке. Свойство z-index регулирует вертикальный порядок перекрытия элементов, а сам z-index определяет, какой элемент будет располагаться выше остальных.

z-index

Элемент с большим указателем порядка стека всегда будет располагаться выше элемента более низкого порядка. А элемент с самым большим индексом перекроет остальные элементы. «Порядок стека» обращается к позиции элемента по оси Z. Чем выше значение z-индекса, тем ближе элемент будет располагаться к верхней части порядка наложения.

Синтаксис Z-index 

z-index: auto| number | initial | inherit;

 Z-index: auto

  • Это настройка по умолчанию, что приписывает одинаковое значение и элементу, и родителю. Если значение не определено для родителя, то оно равняется нулю (0);

Z-index: integer number

  • Z-index: 1
  • Z-index: 2
  • Z-index: 3

Z-index: negative number

  • Z-index: -1

Z-index: inherit

  • Принимает такое же определенное значение, как свойство элемента родителя.

Ниже предоставлен HTML код, который будем использовать. 

<!DOCTYPE html>

<html>

<head>

    <title>Z-Index tutorialtitle>

head>

<body>

    <div id="one">Onediv>

    <div id="two">Twodiv>

    <div id="Three">Threediv>

    <div id="Four">Fourdiv>

    <div id="Five">Fivediv>

body>

html>

Далее мы используем CSS код для установки внешнего вида всем элементам HTML, что использовались ранее.

#one {

    border: solid 5 px silver;

    background-color: Aqua;

    position: absolute;

    z-index: 1;

    opacity: 0.5;

    height: 100 px;

    width: 100 px;

}

#two {

    border: solid 5 px silver;

    background-color: Green Yellow;

    position: absolute;

    top: 30 px;

    left: 35 px;

    z-index: 2;

    opacity: 0.5;

    height: 100 px;

    width: 100 px;

}

#Three {

    border: solid 5 px silver;

    background-color: Coral;

    position: absolute;

    top: 60 px;

    left: 60 px;

    opacity: 0.5;

    z-index: 3;

    height: 100 px;

    width: 100 px;

}

#Four {

    border: solid 5 px silver;

    background-color: Yellow;

    position: absolute;

    top: 90 px;

    left: 90 px;

    opacity: 0.5;

    z-index: 4;

    height: 100 px;

    width: 100 px;

}

#Five {

    border: solid 5 px silver;

    background-color: MediumSpringGreen;

    position: absolute;

    top: 120 px;

    left: 120 px;

    opacity: 0.5;

    z-index: 5;

    height: 100 px;

    width: 100 px;

}

Полный код

<!DOCTYPE html>

<html>

<head>

    <title>Z-Index tutorialtitle>

    <style>

        #one {

            border: solid 5px silver;

            background-color: Aqua;

            position: absolute;

            z-index: 1;

            opacity: 0.5;

            height: 100px;

            width: 100px;

        }

        #two {

            border: solid 5px silver;

            background-color: Green Yellow;

            position: absolute;

            top: 30px;

            left: 35px;

            z-index: 2;

            opacity: 0.5;

            height: 100px;

            width: 100px;

        }

        #Three {

            border: solid 5px silver;

            background-color: Coral;

            position: absolute;

            top: 60px;

            left: 60px;

            opacity: 0.5;

            z-index: 3;

            height: 100px;

            width: 100px;

        }

        #Four {

            border: solid 5px silver;

            background-color: Yellow;

            position: absolute;

            top: 90px;

            left: 90px;

            opacity: 0.5;

            z-index: 4;

            height: 100px;

            width: 100px;

        }

        #Five {

            border: solid 5px silver;

            background-color: MediumSpringGreen;

            position: absolute;

            top: 120px;

            left: 120px;

            opacity: 0.5;

            z-index: 5;

            height: 100px;

            width: 100px;

        }

    style>

head>

<body>

    <div id="one">Onediv>

    <div id="two">Twodiv>

    <div id="Three">Threediv>

    <div id="Four">Fourdiv>

    <div id="Five">Fivediv>

body>

html>

Наш результат:

Результат

Заключение

Надеемся, что данная статья Вам понравилась. Она будет полезной для новичков в HTML и CSS.

Источник: http://www.c-sharpcorner.com/UploadFile/88d8c0/z-index-property-in-css/

СТАТЬИ ПО СХОЖЕЙ ТЕМАТИКЕ
ВИДЕО КУРСЫ ПО СХОЖЕЙ ТЕМАТИКЕ
КОМЕНТАРИИ И ОБСУЖДЕНИЯ
ОЦЕНИТЕ ДАННЫЙ МАТЕРИАЛ

ПОДПИСКА НА ITVDN ВЫГОДА ДО 29.95$ НА ОБУЧЕНИЕ ПРЕСТИЖНЫМ ПРОФЕССИЯМ!

1 месяц19.99$
подписка

легкий старт в обучении

3 месяца49.99$
подписка

выгода от подписки до9.98$

6 месяцев89.99$
подписка

выгода от подписки до29.95$