slogin.info

ihc 468x60 1 1
Звезда активнаЗвезда активнаЗвезда активнаЗвезда не активнаЗвезда не активна3 / 5
 
Автор: Администратор
Просмотров: 21917
Теги: z-index, css, html

В данной статье речь пойдет о том, как поместить слой или элемент в HTML на передний/задний план при помощи CSS. А точнее при помощи свойства z-index.

Скорее всего, каждый из вас в детстве делал Аппликации. Это процесс, когда на лист бумаги поверх вы приклеиваете различные элементы - дома, деревья, облака и так далее. Получается что-то вроде подобия 3-d изображения, где каждый элемент, далее просто слой, наклеен поверх другого. Все они наклеены на лист бумаги.

HTML с помощью CSS позволяет получить аналогичную картинку, только на веб-страничке. Каждый из элементов можно наклеить поверх других при необходимости.

Когда такое может понадобиться? Если вы любитель поиграться с position и положением относительно экрана, может так получится, что один элемент у вас будет перекрывать другой, но вам нужно вытащить закрытый элемент на передний план. Еще часто без определения элементов на задний/передние планы сложно реализовать ту или иную штуку из дизайна, который задумывал не программист, а дизайнер. В общем, область применения у этого свойства очень широкая и ограничивается только вашей фантазией.

Для начала стоит  запомнить, что z-index не работает, если у элемента не задано свойство position с значениями absolute, relative или fixed. Это имеет место, так как накладываться, а следственно и размещать их на различных уровнях слоев нужно будет, только если вы начнете наезжать одним элементом на другой за счет position и bottom, top, left, right. Но не только в этом случае может понадобиться расставление z-index. Наезжать элементами друг на друга можно за счет отрицательных значений margin и другими способами.

Если вы не указываете z-index, то для всех элементов по-умолчанию он равен 0. z-index может принимать как положительные так отрицательные целые значения. В случае значения по-умолчанию элементы будут накладываться друг на друга по тому, чем дальше прописан элемент в коде тем он будет на более переднем плане(в Демо пример №1).

Вот как может выглядеть код CSS-стилей для 3 <div> с заданными z-index, так что они располагаются по принципу, чем первее <div> в коде, тем он более на переднем плане (противоположно принципу по-умолчанию), это в Демо пример №2:

div {position: absolute; text-align:center; font-weight:bold;}
div.first {width:100px; height:100px;  background:#006600; left:0; top:50px; z-index:2;}
div.first2 {width:100px; height:100px; background:#990000; left:50px; top:100px; z-index:1;}
div.first3 {width:100px; height:100px; background:#99FF66; left:100px; top:150px; z-index:0;}

 Важно понимать, что браузер будет сравнивать z-index только у элементо расположенных на одном уровне вложенности и, даже если у внутреннего элемента z-index больше, чем у элементов расположенных на одном уровне с его родителем, то он будет отображаться на заднем плане по отношению к ним (в Демо пример №3).

Вы можете просмотреть эффект в Демо:

demo

Комментарии   

0 # Андрей Лымарь 23.08.2016 19:31
Вот подскажите мне на резал кучу картинок, загнал в размер.ю сделал по ним переходы - тоесть использую, как ссылки, в CSS задал z-index для ссылок и для псевдокласса, все вроде работает, только вот что -две ссылки мне надо оставить отдельно, тоесть чтобы не срабатывал z-index, как мне это сделать?
Ответить | Ответить с цитатой | Цитировать
0 # Андрей Лымарь 23.08.2016 19:36
вот пример из html:a {
position: absolute;
z-index: auto;
top: 100px;
}
a:hover {
position: absolute;
z-index:1;
top: 84px;
}
Ответить | Ответить с цитатой | Цитировать
0 # Андрей Лымарь 23.08.2016 19:38
а это уже то что мы видем
Ответить | Ответить с цитатой | Цитировать
0 # Администратор 24.08.2016 21:59
Цитирую Андрей Лымарь:
а это уже то что мы видем

Ничего не понятно, пожалуйста используйте это https://jsfiddle.net/
Сделайте там ситуацию которую описали и тогда я смогу помочь.
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий

Авторизоваться с помощью:

     


Защитный код
Обновить

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
  • Hozephlof
    3.00
  • JesseBLamurb
    3.00
  • Lambadacit
    3.00
  • LiStudio16
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Похожие материалы

Языки программирования сайтов

Приветствую всех посетителей моего сайта. В этой статья я расскажу вам о языках программирования, которые нужны для управления, созданий и разработки своего сайта.

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее
Удобное собрание CSS хаков для самых популярных браузеров

Для каждого хорошего верстальщика в какой-то момент времени встает вопрос кроссбраузерности. Что такое кроссбраузерность? Это свойство сайта или дизайна сайта отображаться одинакого в разных барузерах. Дело в том, что при создании браузеров разработчики не сильно задумываются о стандартизации, это порождает разное представление одного и того же сайта в их продукции. Создание кроссбраузерной верстки/сайта и позволяет преодолеть эту разницу.

Теги:

css, хаки, hacks, читы

Комментариев: 0 Подробнее
!important в CSS Просмотров 1380
!important в CSS

Часто бывает, что люди, давно изучающие CSS, не имеют представления или не понимают до конца как работает директива !important в CSS. В этой статье я постараюсь описать её действие и показать пару примеров, такая статья так же пригодится тем, кто только начал изучать CSS.

Теги:

css, css3, style, !important

Комментариев: 0 Подробнее
Как подключать свои шрифты на сайт, или все о @font-face в CSS

В этой статье я расскажу о том, каким образом можно подключить сторонние шрифты на свой сайт, а так же дам пару полезных ссылок и советов.

Теги:

css, css3, @font-face, font, шрифт

Комментариев: 0 Подробнее

Последнее с форума

форма на DataLife Engine 1 день 9 ч. назад
synt аватар
Здравствуйте! Подскажите модуль или решение для создания сложных форм с капчей и возможностью задава...
Перейти в тему
Frontend Разработчик, Москва 1 мес. 3 нед. назад
porohinaio@mail.ru аватар
INMYROOM это контентный проект про интерьеры и маркетплейс дизайнерской мебели с посещаемостью более...
Перейти в тему
anzhelika_bell аватар
Обязанности: Верстка web-интерфейсов по готовым макетам, исправление дефектов верстки. Требования: ...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.