Курс CSS. Урок 38. Z-индексы.
Z-индексы представляют собой технику разрешения конфликта места.
Пусть, например, в нашем большом блоке имеется 2 блока поменьше и размещены они так, что частично пересекаются.
В данном случае, конфликт места разрешается по принципу "кто последний, того и место". Свойство z-index не используется совсем и это равносильно, как если бы мы каждому элементу прописали свойство z-index:auto;
Если, например, требуется, чтобы независимо от очередности появления на странице, некий элемент занимал спорное место, то ему следует прописать z-index с большим значением, чем у конкурентов.
Поставим зеленому блоку z-index:20;, а красному z-index:10;
Теперь уже работает принцип "у кого больше z-index, того и место". Такой подход часто используется в сложных проектах, когда элементов много и есть элементы, которые явно должны доминировать в плане захвата места.
Важно отметить, что свойство z-index работает только с позиционируемыми нестатичными элементами (т.е. элементами у которых position:absolute, position:relative, или position:fixed).
Попробуем добавить на наш учебный пример такой элемент, который явно должен доминировать:
У нашей птички z-index:20; - это больше, чем у кнопки. Поэтому, несмотря на то, что птичка в хидере прописана первой, а кнопка идет за птичкой, все-таки, благодаря большему значению z-index, птичка своим хвостом закрывает кнопку. Именно этого визуального эффекта и хотел дизайнер.
В примере использовали следующие правила для стилей:
В примере использовали следующий код HTML:
Созданные новые классы в файле стилей CSS и код HTML будем также использовать в нашем очередном учебном тестовом примере.
css_038_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_038_001.zip ← скачайте пример, чтобы установить на свой сайт...
Напоминание. Все нужные графические файлы мы скачали заранее, еще на уроке 15...
Пусть, например, в нашем большом блоке имеется 2 блока поменьше и размещены они так, что частично пересекаются.
Если, например, требуется, чтобы независимо от очередности появления на странице, некий элемент занимал спорное место, то ему следует прописать z-index с большим значением, чем у конкурентов.
Поставим зеленому блоку z-index:20;, а красному z-index:10;
Важно отметить, что свойство z-index работает только с позиционируемыми нестатичными элементами (т.е. элементами у которых position:absolute, position:relative, или position:fixed).
Попробуем добавить на наш учебный пример такой элемент, который явно должен доминировать:
position:static; - По умолчанию. Элементы показываются по порядку, как они появляются в потоке документа.
position:absolute; - Элемент позиционируется относительно своего первого позиционируемого (нестатичного) предка.
position:fixed; - Элемент позиционируется относительно окна браузера. Поэтому они вылетели из таблицы и находятся внизу экрана, 40 и 60 пикселей от нижнего края.
position:relative; - Элемент позиционируется относительно своей нормальной позиции, так, например, "left:20" добавляет 20 пикселей к своей нормальной позиции.
position:inherit; - Значение свойства position (позиционирование) наследуется от своего родителя.
У нашей птички z-index:20; - это больше, чем у кнопки. Поэтому, несмотря на то, что птичка в хидере прописана первой, а кнопка идет за птичкой, все-таки, благодаря большему значению z-index, птичка своим хвостом закрывает кнопку. Именно этого визуального эффекта и хотел дизайнер.
В примере использовали следующие правила для стилей:
.body_css_038 {
position:relative;
background-color: #D2D2D2;
outline: 0px solid #CCCCCC;
color: #696969;
font: 11px Verdana, sans-serif;
}
.wrapper_css_038 {
/* width:80%; */
width:650px;
background-color: #F4F4F4;
margin: 30px auto;
}
.header_css_038 {
height:75px;
background-color: #F8AC18;
background-image: url('images/redHeader.png');
background-repeat: no-repeat;
position:relative;
}
.content_css_038 {
padding: 20px 30px;
}
#pic_new_css_038 {
position:absolute;
top:0;
left:0;
}
#button_css_038 {
position:absolute;
top:-14px;
left:294px;
border:1px solid #F00000;
z-index:10;
}
#bird_css_038 {
position:absolute;
top:-3px;
left:272px;
border:0px solid #000000;
z-index:20;
}
#operator_css_038 {
position:fixed;
width:22px;
height:180px;
top:250px;
left:0px;
}
#operator_css_038 img {
border:none;
}
В примере использовали следующий код HTML:
<div id="operator_css_038" class="operator_css_038" style=""> <a href="http://kocby.ru/css/"><img src="images/operator.png" width="22" height="180" class="" alt="Оператор поддержки" title="Оператор поддержки"></a> </div> <div id="wrapper_css_038" class="wrapper_css_038"> <div id="header_css_038" class="header_css_038"> <img src="images/bird.png" width="106" height="90" id="bird_css_038" title="Птичка" alt="Птичка" /> <img src="images/button_css.png" width="87" height="28" id="button_css_038" title="CSS - это наше всё!" alt="CSS - это наше всё!" /> </div> <div id="content_css_038" class="content_css_038"> <img id="pic_new_css_038" src="images/new.png" width="104" height="104" /> <p>position:static; - По умолчанию. Элементы показываются по порядку, как они появляются в потоке документа.</p> <p>position:absolute; - Элемент позиционируется относительно своего первого позиционируемого (нестатичного) предка.</p> <p>position:fixed; - Элемент позиционируется относительно окна браузера. Поэтому они вылетели из таблицы и находятся внизу экрана, 40 и 60 пикселей от нижнего края.</p> <p>position:relative; - Элемент позиционируется относительно своей нормальной позиции, так, например, "left:20" добавляет 20 пикселей к своей нормальной позиции.</p> <p>position:inherit; - Значение свойства position (позиционирование) наследуется от своего родителя.</p> </div> </div>
Созданные новые классы в файле стилей CSS и код HTML будем также использовать в нашем очередном учебном тестовом примере.
css_038_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_038_001.zip ← скачайте пример, чтобы установить на свой сайт...
Напоминание. Все нужные графические файлы мы скачали заранее, еще на уроке 15...
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
