Свойство z-index

Z index

Большая часть свойств каскадных таблиц стилей достаточно понятны и просты. Чаще всего видимый результат дает, их использование применительно к любому выбранного элементу разметки, преобразующемуся на глазах. Чтобы ощутить эффект работы CSS, достаточно просто обновить страницу. Но при этом существуют и некоторые иные свойства каскадных стилей, которые более замысловаты. Бывают, что работают они не на постоянной основе, а при условии определённых заданных параметров.

К подобной группе свойств можно отнести и z-index, который по началу не так очевиден для понимания. Однако, если немного разобраться в том, что на самом деле z-index, то окажется, что он совершенно прост в использовании, а его уникальный эффект очень часто используют в качестве достойного инструмента, который помогает при создании дизайна сайтов.

Практически все виды элементов, которые располагаются на веб-страницах, способны накладываться один на другой в указанном порядке. Таким способом они создают своеобразное третье измерение, которое получается перпендикулярным экрану. Размещением этих объектов по уровням вдоль оси z управляет свойство z-index. Однако подобные свойства работают исключительно для тех элементов, которым значение position задается как relative, fixed или absolute.

В виде указываемого значения могут быть использованы только целые числа – как отрицательные, так и положительные, включая ноль. Чем будет больше значение числа, тем выше элемент будет находиться относительно тех элементов, значение которых ниже. Если значение z-index будет равным, то на переднем плане окажется элемент, который в коде HTML был ниже описан. Спецификация допускает использование отрицательных значений для z-index, однако, созданные таким образом элементы не будут отображаться в версиях до 2.0 браузера Firefox.

Не считая числовых данных, также применяется параметр auto. В этом случае выстраивается автоматический порядок элементов, на основании их расположения в коде HTML. 


z-index: 1;
z-index: auto;
z-index: inherit;

1 – цифра один указывает на первый уровень расположения элемента.

auto – автоматическое расположение элементов.

inherit – указывает на то, что оно наследуется у родителя.

Свойства z index 

HTML

<div class="container">

  <div class="box one">
    <p>
      1
    </p>
  </div>
  
  <div class="box two">
    <p>
      2
    </p>
  </div>
  
  <div class="box three">
    <p>
      3
    </p>
  </div>
  
</div>



CSS

* {	
    margin: 0;
    padding: 0;
}
body {
    color: #333;
    padding-top: 50px;
    font-family: Arial, Helvetica, sans-serif;
}
.container{
    width: 280px;
    height: 280px;
    margin: 0px auto;
    position: relative;
    background-color: #fC3;
}
.box{
    width: 90px;
    height: 90px;
    position: absolute;
    text-align: right;
}
p{
    color: #fff;
    padding-top: 4px;
    padding-right: 6px;
}
.one{
    z-index: 3;
    left: 66px;
    bottom: 114px;
    background-color: #c3a65c; 
}
.two{
    z-index: 1;
    left: 90px;
    bottom: 90px;
    background-color: #9a7a2d;
}
.three{
    z-index: 2;
    left: 114px;
    bottom: 66px;
    background-color: #3f2d00;
}