Почему не работает z index css

Почему z-index не работает с столбцами CSS в Chrome?

У меня возникла проблема с z-index моего многоколоночного макета, созданного с помощью column-count . Я хочу переместить нажатый div сверху списка .animate() , но когда я нажимаю элемент в правом столбце, он идет за элементами левого столбца. Это отлично работает в Firefox, но в Chrome это не работает.

Используйте transform: translateZ вместо z-index .

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

Кажется, что Chrome создает отдельный слой для каждого столбца, и вы не можете управлять его z-index . Я предлагаю решение с CSS3 Flexbox вместо столбцов CSS3:

Я думаю, что это невозможно вообще. Потому что, как вы видите, элемент с правой стороны выходит за весь левый столбец.

Я не знаю, как именно column-count работает в DOM, но я думаю, что он создает две части (ваши два столбца), и все эти <ul> являются дочерними элементами этих столбцов, и эти столбцы не могут пересекаться друг с другом. И с z-index , если элемент B находится поверх элемента A, дочерний элемент элемента A никогда не может быть выше элемента B. Я думаю, что это случай здесь.

здесь я создаю pluncker, чтобы вы могли видеть лучше

Я обновил свой скрипт. Вам не нужно было использовать column-gap и column-count . просто используйте свойство float css.
Следите за этой скрипкой без изменения javascript. Просто изменение css. Я надеюсь, что это решит вашу проблему (работая во всех браузерах)

Почему z-index не работает?

Я пишу веб-приложение, и у меня возникают проблемы с одной частью, где у меня есть функция опрокидывания, но в настоящее время она работает. EDIT: pastehtml был отклонен, вот jfiddle: http://jsfiddle.net/XmKwt/1/

Правый div находится под левым div, хотя z-index говорит, что он не должен.

Я обнаружил, что если "позиция: относительная"; css удаляется (см. источник), тогда он работает отлично, но я не понимаю, почему и мне нужно "position: relative"; css там по другим причинам, не продемонстрированным в этом упрощенном примере.

Почему z-index CSS не работает четыре возможные причины возникновения проблемы

Z-index не работает с фиксированным позиционированием

У меня есть div с позиционированием по умолчанию (т.е. position:static ) и div с позицией fixed .

Если я устанавливаю z-индексы элементов, кажется невозможным сделать неподвижный элемент за статическим элементом.

Я могу обойти это, используя position:absolute на статическом элементе, но может ли кто-нибудь сказать мне, почему это происходит?

(Похоже, что у этого вопроса есть аналогичный вопрос (Исправлено размещение индекса z-индекса), но у него нет удовлетворительного ответа, поэтому я спрашивая это здесь с моим примером кода)

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

Решение

Элемент &#8212; это ваш единственный контекст стекирования, поэтому просто следуйте правилам стекирования в контексте стекирования, и вы увидите, что элементы сложены в этом порядке

  • Корневой элемент контекста контекста (элемент в этом случае)
  • Позиционированные элементы (и их дочерние элементы) с отрицательными значениями z-индекса (более высокие значения складываются перед более низкими значениями, элементы с одинаковым значением складываются в соответствии с внешним видом в HTML)
  • Непоставленные элементы (упорядоченные по внешнему виду в HTML)
  • Позиционированные элементы (и их дочерние элементы) с z-индексом значения auto (упорядочены по внешнему виду в HTML)
  • Позиционированные элементы (и их дочерние элементы) с положительными значениями z-индекса (более высокие значения складываются перед более низкими значениями, элементы с одинаковым значением складываются в соответствии с внешним видом в HTML)
  • установите z-индекс -1, для #under расположен -ve z-index появится за нерасположенным элементом #over
  • установите положение #over в relative , чтобы к нему применилось правило 5

Реальная проблема

Разработчики должны знать следующее, прежде чем пытаться изменить порядок укладки элементов.

  • Когда создается контекст укладки
  • По умолчанию элемент является корневым элементом и является первым контекстом стекирования

Когда создается контекст укладки

  • Когда элемент является корневым элементом документа (элемент )
  • Если элемент имеет значение позиции, отличное от статического, и значение z-index, отличное от auto
  • Когда элемент имеет значение непрозрачности менее 1
  • Несколько новых свойств CSS также создают контексты стекирования. К ним относятся: преобразования, фильтры, css-регионы, постраничные медиа и, возможно, другие. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
  • Как правило, кажется, что если для свойства CSS требуется рендеринг в внеэкранном контексте, он должен создать новый контекст стекирования.

Порядок стекирования в контексте стека

  • Корневой элемент контекста стекирования (элемент по умолчанию является единственным стекирующим контекстом, но любой элемент может быть корневым элементом для контекста стекирования, см. правила выше)
  • Нельзя поместить дочерний элемент за элемент контекста корневого стека

Css свойство z-index — вся правда

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

Начнем наш пост со знакомства. Свойство z-index определяет уровень стека html-элемента. «Уровень стека» обозначает позицию элемента на оси Z, направленную перпендикулярно оси X и оси Y. Элемент, которому назначено самое большое значение z-index, располагается в самом верху стека.

Если сначала не все понятно, то думаю после просмотра 3D представления «уровня стека» (оси Z) станет более понятно:

Обычный порядок стека или порядок элементов на оси Z, определяет ряд факторов. Далее предоставлен список, отображающий порядок, в котором элементы укладываются в стек, начиная снизу:

  1. Фон и рамка элемента, создающие контекст стека
  2. Элементы с отрицательным контекстом стека, в порядке появления
  3. Не позиционированные, не плавающие, блочные элементы, в порядке появления
  4. Не позиционированные, плавающие элементы, в порядке появления
  5. Строчные элементы, в порядке появления
  6. Позиционированные элементы, в порядке появления

Этим трем блокам не назначен z-index.

Все секреты или почему появляется путаница?
Весь смысл свойства z-index заключается в том, чтобы изменять обычный порядок стека, но при неправильном использовании, оно может привести в заблуждение. Это заблуждение появляется потому, что свойство z-index будет работать только у элементов, которые имеют свойство position с одним из трех значений: fixed, relative или absolute.

Использование
Свойство z-index может влиять на порядок элементов как у блочных, так и у строчных элементов, и устанавливается назначением положительного или отрицательного целого значения, или значения auto. Значение auto определяет элементу такой же порядок слоев, как у родительского элемента.

#box
На примере покажу как можно при помощи z-index поменять обычный порядок элементов с теми же блоками, как и в первом примере:

Красиво, просто, но при определенных обстоятельствах, в таких браузерах как IE6 и Firefox 2, свойство z-index может обрабатываться по-разному.

IE6: Даешь элементу select больше приоритета!
Дело в том, что такой чудесный браузер как IE6 ни в какую не хочет отображать элемент

При помощи javascript:
Я не буду показывать вам пример, потому что реализация довольно таки простая и действенная. Вы просто прячьте элемент (например display:none) когда блок, который должен отображаться поверх, появляется на странице. Такое решение подойдет для реализации выпадающего меню и popup.

Firefox 2: Что такое отрицательное значение? Аа?
Вот ведь. А firefox 2 тоже имеет свой недостаток. Хоть его и убрали с поддержки со стороны разработчиков, все же напомню, что forefox 2 не работает с отрицательными значениями z-index и ничего с этим поделать нельзя.

Ну вот. Такое страшное и неведанное css свойство z-index кажется таким простым. Надеюсь, я ничего не упустил. Если вам известны еще какие-то проблемы с z-index, милости прошу в комментарии, потому что я в своей практике с другими не встречался.
Вдохновил Louis Lazaris .

Почему z-index CSS не работает: четыре возможные причины возникновения проблемы

187789 просмотра

4 ответа

995 Репутация автора

Так что, если я z-index правильно понимаю , было бы идеально в этой ситуации:

Я хочу разместить нижнее изображение (тег / карточку) под div над ним. Таким образом, вы не можете видеть острые края. Как мне это сделать?

тоже не работает Ни один не делает комбинацию ничего подобного. Как так?

Ответы (4)

361 плюса

5133 Репутация автора

z-index Свойство работает только на элементах с position значением , чем static (например position: absolute; , position: relative; или position: fixed ).

Существует также position: sticky; то, что поддерживается в Firefox, с префиксом в Safari, какое-то время работало в старых версиях Chrome под пользовательским флагом и находится на рассмотрении Microsoft для добавления в их браузер Edge.

Автор: Evert Размещён: 08.02.2012 10:50

26 плюса

2482 Репутация автора

Ваши элементы должны иметь position атрибут. (например absolute , relative , fixed ) или z-index не будет работать.

Автор: clem Размещён: 08.02.2012 10:51

20 плюса

168335 Репутация автора

Во многих случаях элемент должен быть расположен для z-index работы.

Действительно, применение position: relative к элементам в вопросе, скорее всего, решит проблему (но недостаточно кода, чтобы знать наверняка).

На самом деле, position: fixed , position: absolute и position: sticky также позволит z-index , но эти значения также изменить расположение. С position: relative макетом это не мешает.

По сути, пока элемент не установлен position: static (настройка по умолчанию), он считается позиционированным и z-index будет работать.

Много ответов на &#171;Почему не работает z-index?&#187; вопросы утверждают, что работает z-index только на позиционированных элементах. Что касается CSS3, это больше не так.

Элементы Flex отображаются точно так же, как и встроенные блоки, за исключением того, что порядок документов с измененным порядком используется вместо порядка необработанных документов, и z-index значения, отличные от auto контекста стека, даже если они position есть static .

Порядок рисования элементов сетки точно такой же, как и у встроенных блоков, за исключением того, что порядок документов с измененным порядком используется вместо порядка необработанных документов, а z-index значения auto отличаются от контекста стека, даже если он position есть static .

Вот демонстрация z-index работы с не позиционированными элементами Flex: https://jsfiddle.net/m0wddwxs/

44 плюса

6034 Репутация автора

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

Контексты стекирования имеют иерархию, и каждый контекст стека рассматривается в порядке стека родительского контекста стека.

Так что со следующим html

независимо от того, насколько велико будет значение z-index of el3 , оно всегда будет ниже, el1 потому что его родитель имеет более низкий контекст стека. Вы можете представить порядок наложения как уровни, где порядок наложения el3 фактически равен 3.8, что ниже 5 .

Если вы хотите проверить контексты стека родительских элементов, вы можете использовать это:

Почему z-index не работает?

Итак, если я правильно понял z-index , это было бы прекрасно в этой ситуации:

Я хочу поместить нижнее изображение (тег/карту) под div над ним. Таким образом, вы не можете видеть острые края. Как это сделать?

тоже не работает. Ни одна комбинация ничего подобного. Почему?

4 ответа

Свойство z-index работает только с элементами position , отличными от static (например, position: absolute; , position: relative; или position: fixed ).

Существует также position: sticky; , поддерживаемый в Firefox, с префиксом в Safari, который некоторое время работал в более ранних версиях Chrome под специальным флагом и находится на рассмотрении Microsoft для добавления в свой браузер Edge.

ваши элементы должны иметь атрибут позиции. (например, абсолютный, относительный, фиксированный) или z-индекс не будут работать

Во многих случаях элемент должен быть расположен для z-index для работы.

Действительно, применение position: relative к элементам в вопросе, скорее всего, решит проблему (но кода недостаточно, чтобы знать наверняка).

На самом деле, position: fixed , position: absolute и position: sticky также включит z-index , но эти значения также изменят макет. С position: relative макет не нарушен.

По существу, если элемент не является position: static (по умолчанию), он считается позиционированным и z-index будет работать.

Многие ответы на &#171;Почему не работает z-index?&#187; вопросы утверждают, что z-index работает только с позиционированными элементами. Начиная с CSS3, это уже не так.

Элементы flex items или элементы сетки могут использовать z-index , даже если position &#8212; static .

Элементы Flex пишутся точно так же, как и встроенные блоки, за исключением того, что порядок заказанных документов используется вместо порядок документа и z-index значения, отличные от auto , создают контекст стекирования, даже если position равен static .

Порядок рисования элементов сетки точно такой же, как и встроенные блоки, за исключением того, что порядок заказанных документов упорядочен вместо необработанного порядка документа и z-index значения, отличные от auto , создают контекст укладки, даже если position &#8212; static .

Здесь демонстрируется z-index , работающая с непозиционированными элементами flex: https://jsfiddle.net/m0wddwxs/

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

Контексты стеки имеют иерархию, и каждый контекст стекирования рассматривается в порядке стекирования родительского контекста стекирования.

Итак, со следующим html

независимо от того, насколько большой будет z-index of el3 , он всегда будет находиться под el1 , потому что он имеет более низкий контекст стекирования. Вы можете представить порядок укладки как уровни, где порядок стекирования el3 на самом деле 3,8, который ниже 5.

Если вы хотите проверить контексты стеков родительских элементов, вы можете использовать это:

Почему z-index CSS не работает: четыре возможные причины возникновения проблемы

menu &#8212; общий блок с меню.
menu_item &#8212; каждый конкретный пункт меню, их 5.

Вроде в CSS всё верно (меню должно быть ПОД шапкой. Но почему-то не работает. Браузер Firefox.

DiAksID, для header уже задан relative

упс точно :bl: пардонтий. значит z-index работает нормально, но слой перекрывается (или что там не так как надо). надо наследования отследить в отладчике: для relative позиционирование слоёв идет не так как для absolute, не от корня а от предка. вроде бы ;).

Сделал демо-страницу (http://work.kreine.ru/internal.html).
Вопрос остаётся открытым &#128578;

PS Зелёный блок должен быть ПОД серым. А он сейчас НАД серым.

Сделал демо-страницу (http://work.kreine.ru/internal.html).
Вопрос остаётся открытым &#128578;

PS Зелёный блок должен быть ПОД серым. А он сейчас НАД серым.

а что Вы хотели? зелёный и не должен быть под серым:

#header &#8212; position:relative; z-index 100;
.header_menu &#8212; потомок #header, position:relative; z-index не указан (по умолчанию выше предка);
.header_menu_item &#8212; потомок .header_menu, position: не указан (по умолчанию static); z-index 3 (не работает с static); а если бы указали relative, блок был бы внутри предка на 3-й &#171;единице&#187;, что привело бы к такому же результату;

так что всё правильно.

по умолчанию, слой потомка всегда выше слоя предка.

что бы для position:relative потомок был ниже предка ему надо задать отрицательный z-index; причём прямой потомок с relative (!), если идут вложения с relative, то отрицательный z-index будет работать по отношению к ближайшему предку с relative.

для position:absolute другая байда &#8212; и z-index считается в абсолютных единицах, от корня.

Всё умом понятно, но я в трёх соснах, похоже, запутался.

В первом посте я немножко неправильно сформулировал задачу, только теперь это понял &#128578;
z-index нужно не на всё меню, а только на каждую конкретную ссылочку. Ибо слой буде НАД тогда, когда мы на этой странице. В остальных случаях слой будет ПОД шапкой.

Обновил демо-страницу (http://work.kreine.ru/internal.html). Здесь не буду расписывать, из представленной на странице разметки видно мои потуги))))))

. Всё умом понятно, но я в трёх соснах, похоже, запутался .

&#171;это страшно только по первому разу&#187; (с)

на палцах, как надо:

body : будем считать, абсолютный z-index как бе 0

#header : прямой потомок body, position:relative, z-index:100 т.е. абсолютный z-index как бе 100

.header_menu : прямой потомок #header, position:relative, z-index:-1 т.е. абсолютный z-index как бе 99

остальную муть с position и z-index из меню удаляем

Почему не работает css

Ссылка на файл

Код CSS может находиться как в HTML документа, так и в отдельном файле с одноименным расширением. Если CSS находится во внешнем файле и не работает, то первым делом следует проверить ссылку в HTML коде.

Ссылка (href) должна писаться в одиночном теге link. Содержимое link в HTML5 должно выглядеть следующим образом: href=”style.css” rel=”stylesheet”. Не забывайте, что сам тег link располагается между парными ключевыми тегами head.

После значения href указывается имя того css-файла, который должен быть прикреплен к документу (это не обязательно style). Если файл со стилями находится в другой папке, то обязательно через слэш (/) необходимо указать путь к нему.

Синтаксис CSS

Если со ссылкой все в порядке, а CSS все равно не работает, нужно проверить синтаксис в коде.

Во-первых, проверьте селектор. Селектор должен совпадать с тем, что у вас написано в html-файле. То есть, если в html выбран >
Сам блок, где объявляется стиль, пишется после имени селектора в фигурных скобках. Между названием свойства и его значением ставится двоеточие, а после &#8212; точка с запятой.

Браузер

Если браузер, на котором вы проверяете свой css-код, уже устарел, то он не в состоянии корректно отображать язык CSS3. Поэтому в случае, если код не работает, обновите свой браузер до последней версии.

Используйте для тестирования разные браузеры: Opera, Google Chrome, Firefox. Не рекомендуется полагаться на Internet Explorer, так как его разработка для Microsoft не является главной задачей, что приводит к его «несостоятельности» по отношению к CSS3.

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

Наследование

Сложнее всего разбираться в CSS с наследованием. В то время, как она чаще всего и является основой нерабочего кода.

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

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

Когда вы найдете контейнер или другой элемент, к которому применен не сработавший стиль, внимательно посмотрите, во что «вложен» этот элемент.

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

Очередной блог фрилансера

коротко и полезно о веб-разработке

CSS-cвойство z-index: подробный обзор

Большинство CSS-свойств довольно просты в использовании. Зачастую, применение CSS-свойства к элементу в разметке дает мгновенный результат – как только вы обновите страницу, набор значений свойства применится, и вы сразу же увидите результат. Другие CSS-свойства, однако, более комплексные и будут работать только после задания определенного набора условий.

Свойство z-index принадлежит к последней группе свойств. Это свойство так часто вызывало всеобщую путаницу и разочарование, как ни одно, из существующих CSS-свойств. По иронии судьбы, однако, когда вы поближе познакомитесь с z-index, вы поймете, что это свойство очень простое, и предлагает эффективный метод решения многих проблем верстки.

В этой статье вы узнаете, что представляет собой z-index, как он может быть неправильно истолкован, а также некоторые примеры его использования. Кроме того, вы узнаете некоторые различия в поведении браузеров при обработке свойства z-index, это касается в основном предыдущих версий Internet Explorer и Firefox. Этот подробный обзор z-index предоставит разработчикам отличную основу для использования этого свойства уверенно и эффективно.

Что это такое?

Свойство z-index определяет уровень стека HTML-элемента. «Уровень стека» обозначает позицию элемента на оси Z (направленно перпендикулярно оси X, или оси Y). Элемент, которому назначено самое большое значение z-index, будет расположен в самом верху стека слоев. Этот стек слоев, располагается перпендикулярно к экрану, или области просмотра.

3-д представление оси Z:

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

Обычный порядок стека

На HTML-странице, обычный порядок стека (то есть порядок элементов на оси Z), определяет ряд факторов. Далее представлен список, отображающий порядок, в котором элементы укладываются в стек, начиная снизу. В этом списке нет элементов, с назначенным свойством z-index:

  • Фон и рамка элемента, создающие контекст стека
  • Элементы с отрицательным контекстом стека, в порядке появления
  • Не позиционированные, не плавающие, блочные элементы, в порядке появления
  • Не позиционированные, плавающие элементы, в порядке появления
  • Строчные элементы, в порядке появления
  • Позиционированные элементы, в порядке появления

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

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

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

Почему появляется путаница?

Несмотря на то, что z-index не сложное для понимания свойство, при ошибочном толковании, оно может привести в заблуждение начинающих разработчиков. Это заблуждение появляется потому, что свойство z-index будет работать только с тем элементом, у которого свойство position установлено в одно из трех значений: absolute , fixed или relative .

Чтобы продемонстрировать, что z-index, работает только с позиционированными элементами, вот те же самые три блока, вместе с примененными значениями z-index, для изменения обычного порядка слоев:

Серому блоку, установлено значение z-index, равное “9999” ; синему блоку, установлено значение z-index, равное “500” ; и коричневому блоку, установлено значение z-index, равное “1” . Логично было бы предположить, что порядок, в котором уложены блоки, должен изменится. Но этого не случилось в данном примере, потому что, не одному из этих элементов, не назначено свойство position .

Вот те же самые блоки, но только с добавленным свойством position: relative , к каждому из них, и ранее назначенные свойства z-index:

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

Синтаксис

Свойство z-index может влиять на порядок слоев, как у блочных, так и у строчных элементов, и устанавливается назначением положительного или отрицательного, целого значения, или значения auto. Значение auto , определяет элементу такой же порядок слоев, как у родительского элемента.

Вот так выглядит CSS-код третьего примера, где свойство z-index применяется правильно:

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

Использование JavaScript

Если вы хотите динамически изменить значение z-index у элемента, с помощью JavaScript, то это довольно просто. Синтаксис используется такой же, как и для доступа к большинству CSS-свойств, просто замените, записанные через дефис CSS-свойства, на код, как показано ниже:

Как показано в примере, CSS-свойство « z-index », записывается как « zIndex ». Точно так же, « background-color » становится « backgroundColor », « font-weight » становится « fontWeight », и так далее.

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

Неправильная обработка в IE и Firefox

При определенных обстоятельствах, в некоторых браузерах, свойство z-index может обрабатываться по-разному, это касается браузера Internet Explorer, версии 6 и 7, а также Firefox версии 2.

Если вы посмотрите на этот пример, с помощью браузера IE6, вы увидите, что элемент , перекрывает коричневый блок, игнорируя обычный порядок слоев и свойства z-index.

Этот баг в IE6 создает проблемы с выпадающим меню, которое не может перекрыть элементы . Есть два решения этой проблемы. Первое, это с помощью JavaScript временно скрывать элемент , а затем, снова его отображать, после того, как выпадающее меню скроется. Другое решение предполагает использование .

Позиционирование Родительских элементов в IE6/7

Internet Explorer версии 6 и 7, неправильно сбрасывает контекст стека, по отношению к ближайшим, позиционированным, дочерним элементам. Для того чтобы продемонстрировать эту, чуть более сложную проблему, давайте снова отобразим два блока, но в этот раз, мы заключим первый блок, в позиционированный элемент.

Серому блоку, назначено свойство z-index, равное «9999» , синему блоку назначен z-index, равный «1» , и оба элемента позиционированы. Следовательно, при правильной обработке, серый блок, должен быть расположен поверх синего блока.

Опять же, если вы посмотрите на этот пример в браузере IE6, или IE7, вы увидите, как синий блок перекрывает серый блок. Эти браузеры неправильно «сбрасывают» контекст стека, по отношению к позиционированному родителю, но так быть не должно. Серому блоку назначено самое высокое значение z-index, и он должен быть расположен поверх синего блока. Все другие браузеры обрабатывают этот пример правильно.

Отрицательные значения в Firefox 2

В Firefox версии 2, отрицательное значение z-index, позиционирует элемент позади порядка слоев, вместо того, чтобы расположить его поверх фона и рамок элемента, которые устанавливают контекст стека. Ниже представлена картинка, иллюстрирующая этот баг в Firefox 2:

Ниже представлена HTML-версия этой картинки, так что, если вы посмотрите на страницу в Firefox 3 или в другом, современном браузере, вы увидите правильную обработку: Фон серого блока (который является элементом, устанавливающим контекст стека) появляется в самом низу, и текст, расположенный в сером блоке, появляется поверх синего блока, который соблюдает правила «обычного порядка слоев», как говорилось выше.

Примеры использования

Применение свойства z-index к различным элементам на странице, может предоставить быстрое решение для различных задач макета, и позволяет дизайнерам создавать более творческие проекты. Некоторые, интересные примеры использования z-index, на практике, приведены ниже.

CSS-Тултипы

Свойство z-index может быть использовано в качестве части тултипа, основанного на CSS, как показано в примере ниже, от trentrichardson.com:

Фото-галерея

Polaroid Photo Gallery, использует некоторые возможности CSS3 вместе с z-index, для создания фото-галереи, с забавным эффектом наведения.

Fancy Thumbnail Hover Effect – здесь, значение z-index изменяется с помощью JQuery-скрипта.

LightBox

Существует огромное количество качественных скриптов light box, для бесплатного использования, например плагин к JQuery FancyBox. Большинство, если не все они, используют свойство z-index:

Скрипты Light box используют полупрозрачное PNG-изображение, для затемнения фона, в то время как новый элемент, похожий на окно

Перевод статьи «The Z-Index CSS Property: A Comprehensive Look«, автор Louis Lazaris

Рассказать друзьям

Понравилась статья? Лучший способ сказать спасибо &#8212; поделиться ссылкой в социальных сетях:

Почему z-index CSS не работает: четыре возможные причины возникновения проблемы

Изучив рубрику &#171;CSS&#187;, вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».

Бесплатные уроки CSS для начинающих

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

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Почему не работают CSS-стили?

Приветствую вас на сайте Impuls-Web!

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

Навигация по статье:

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

Кэширование браузера

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

Дело в том, что этот браузер по умолчанию кэширует все css-стили сайта. Поэтому очень часто, после внесения изменений, при просмотре страницы в браузере Google Chrome нужно либо несколько раз обновить страницу, чтобы изменения вступили в силу, либо очистить кэш браузера.

Кэш браузера здесь очищается следующим образом:

  1. 1. В правом верхнем углу находим значок с тремя точками и открываем меню настроек Google Chrome
  2. 2. Находим пункт «История» =>«История»

Во всех других браузерах кэш чистится аналогичным образом.

Кэширование на хостинге или на сайте

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

Ошибки в коде

Следующая ситуация, когда стили могут не срабатывать – это ошибки в коде. Особенно это актуально в тех случаях, если вы вносите изменения через встроенный редактор WordPress. Здесь нет подсветки кода и какую-то ошибку в написании того или иного css-свойства очень легко не заметить.

Поэтому для работы с кодом в целом и с css-файлами я рекомендую использовать редакторы кода, в которых есть подсветка этого самого кода. И если вдруг вы какое-то css-свойство напишете не правильно, то у вас он просто не будет подсвечиваться соответствующим цветом, и вы сможете понять, что здесь есть какая-то ошибка.

Не правильно выбранный селектор

Для тех, кто еще не знает, селекторами в css называются та часть кода (те строки), через которые происходит выборка или обращение к тому или иному элементу. Это либо название класса, либо название идентификатора, либо название какого-то html-тега, для которого вы хотите применить определенные стили.

Как же всё таки определить правильно ли вы указали селектор или нет?

Я в таких случаях использую один очень простой прием, который называется задание красной рамки.

К примеру, я хочу изменить стили для блока на сайте.

    1. Для начала мне нужно вычислить его класс или идентификатор. При помощи инспектирование кода определяю что блок имеет класс site-branding.

Если для указанного в css-файле элемента красная рамка появилась, значит селектор указан правильно, и все остальные стили которые для него будут дописываться, тоже должны будут примениться.

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

О приоритете стилей я расскажу чуть ниже.

Если этот фон для указанного элемента применился, значит селектор определен правильно.

Приоритеты стилей

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

В чем здесь может быть причина?

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

    1. Самый высокий приоритет будет иметь тот селектор, в котором указано название тега.
    К примеру, div или span, или h1, или любой другой тег.

2. На втором месте по приоритету будут идти идентификаторы. Когда у вас на сайте есть блок, для которого написано >

В CSS это будет выглядеть следующим образом:

3. На третьем месте по приоритету стоят классы, когда для определенного блока написано >

В CSS это выглядит так:

Как поднять приоритет стилей?

Если вы столкнулись с ситуацией, когда вы написали для определенного блока какие-то CSS-стили, но они у вас не применяются и перекрываются стилями темы, то здесь вам нужно поднимать приоритет написанных вами css-стилей.

Сделать это можно двумя способами:

    1. Можно воспользоваться правилом !important. Выглядит это следующим образом:

Давайте рассмотрим это на примере. Возьмем тот же блок site-branding и при помощи инспектора кода видим, что он находится в теге , который имеет идентификатор masthead.

Копируем этот идентификатор, и перед названием класса ставим решетку, вставляем название идентификатора и ставим пробел:

Данное css-свойство будет работать для блока с классом site-branding, находящегося внутри блока с идентификатором masthead.

Так же мы можем пойти дальше и указать еще здесь, к примеру, тег body. В данном случае это будет выглядеть вот так:

Указанные здесь CSS стили должны будут работать для всех блоков с классом site-branding, которые находятся внутри блока с идентификатором masthead, которые, в свою очередь, находятся внутри тега .

Подведем небольшой итог. Если какое-то css-свойство у вас не срабатывает и перекрывается стилями темы, то вы можете поднять его приоритет, либо дописав ему правило important, либо увеличив селектор для этого блока. В отдельных случаях приходится делать и то и другое.

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

Так же помимо перечисленных здесь причин и приемов их устранения могут быть и другие ситуации, когда определенные стили для тех или иных элементов могут просто не срабатывать. Это связано с тем, что в CSS есть такое понятие как строчные элементы, блочные элементы, табличные элементы, и есть определенный набор CSS-свойств, который работает только для блочных элементов, и не работает для строчных. Либо работает только для строчных и не работает для остальных и так далее.

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

Видеоинструкция

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

Я желаю вам успехов в создании и продвижении ваших проектов! Если данная статья была для вас полезна не забывайте оставлять комментарии и делиться статьей в социальных сетях.

Свойство CSS z-index. Проблема один элемент перекрывает другой.

Работая с позиционированием элементов на веб-странице можно столкнуться с тем, что один блок может «наехать» на другой блок, перекрыть и сделать часть его невидимой.

Вот пример такой ситуации.

«Блок 2» перекрывает «Блок 3», т.к. он находится выше по коду.

По умолчанию, на самом верху отображаются те блоки, которые находятся выше по коду. Но, что делать если нам нужно изменить порядок их отображения?

Для решения этой проблемы в css используется специальное свойство, которое называется z-index.

Значением свойства z-index является целое число. Хотя в спецификации и написано, что это число может быть отрицательным, но я советую вам пользоваться только положительными числами, т.к. в старых браузерах могут быть проблемы с отображением отрицательного z-index.

Это свойство работает только для тех элементов, которые имеют свойство CSS position в значении relative, absolute или fixed.

Давайте попробуем для примера выше поменять порядок отображения блочных элементов.

Разместим «Блок 3» поверх «Блока 2».

Для этого обоим блокам присвоим свойство position:relative, для того, чтобы свойство z-index начало работать.

Все, теперь «Блок 3» отображается поверх «Блока 2».

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *