Z-index: как сделать так, чтобы вложенные элементы появлялись под родительским элементом - PullRequest
Новая
       3

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

4 голосов
/ 27 июня 2011

Эта скрипка должна продемонстрировать проблему:

http://jsfiddle.net/5sqxQ/2/

Я хочу, чтобы подменю появилось под родительским меню. Затем я пытался расширить это с помощью JavaScript, чтобы скользить меню снизу при наведении на родительский элемент li.

Не беспокоится о JavaScript, но не может понять, как стилизовать элементы для достижения желаемого уровня.

Ответы [ 4 ]

12 голосов
/ 27 июня 2011

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

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

Так что, если у родителя z-index: 9, а у ребенка z-index: 8, это все равно, что присвоить z-index 9, 8

См. статью здесь для лучшего объяснения.

Если вы удалите z-index у родителя и установите для элемента-брата значение z-index: -1, это должно сработать. Я не уверен во всех браузерах, но в любом случае он работает в Chrome.

Вот обновленная скрипка

Надеюсь, это поможет.

4 голосов
/ 27 июня 2011

Вы не.

Вместо этого сделайте a кнопкой «Вход».

Примерно так: http://jsfiddle.net/5sqxQ/15/

1 голос
/ 06 февраля 2017

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

ех. Как сказал Тридцать, введите «Вход» .users > li > a, relative или absolute и z-index: 1

Порядок наложения и правила контекста стека ниже приведены по этой ссылке

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

Порядок элементов:

  1. Корневой элемент стекового контекста (элемент <html> по умолчанию является единственным стековым контекстом, но любой элемент может быть корневым элементом для стекового контекста, см. Правила ниже)
    • Нельзя поместить дочерний элемент за корневой контекстный элемент стека
  2. Позиционируемые элементы (и их дочерние элементы) с отрицательными значениями z-index (более высокие значения располагаются перед более низкими значениями; элементы с одинаковым значением располагаются в соответствии с внешним видом в HTML)
  3. непозиционированные элементы (упорядоченные по внешнему виду в HTML)
  4. Позиционируемые элементы (и их дочерние элементы) со значением z-индекса auto (упорядочены по внешнему виду в HTML)
  5. Позиционируемые элементы (и их дочерние элементы) с положительными значениями z-index (более высокие значения располагаются перед более низкими значениями; элементы с одинаковым значением располагаются в соответствии с внешним видом в HTML)

Когда формируется стековый контекст

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...