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

422

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

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

    #over {
      width: 600px;
      z-index: 10;
    }
    
    #under {
      position: fixed;
      top: 5px;
      width: 420px;
      left: 20px;
      border: 1px solid;
      height: 10%;
      background: #fff;
      z-index: 1;
    }
    <!DOCTYPE html>
    <html>
       <body>
          <div id="over">
             Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
          </div>  
          <div id="under">
          </div>
       </body>
    </html>
Развернуть фрагмент

Или на jsfiddle здесь: http://jsfiddle.net/mhFxf/

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

(Похоже, что этот вопрос похож на этот вопрос, ( Fixed Positioning нарушает z-index ), но он не имеет удовлетворительного ответа, поэтому я задаю этот вопрос здесь с моим примером кода)

css z-index DanSingerman
источник

Ответы:

146

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

Решения

<html>Элемент вашего единственного штабелирования контекст, так что просто следуйте штабелирование правил внутри контекста стэк , и вы увидите , что элементы уложены в указанном порядке

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

Так что вы можете

  1. установите z-индекс -1, для #underпозиционированного -ve z-индекс появится позади непозиционированного #overэлемента
  2. установить положение , #overчтобы relativeтаким образом , что правило 5 относится к нему

Настоящая проблема

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

  1. Когда складывается контекст
    • По умолчанию этот <html>элемент является корневым элементом и является первым стековым контекстом.
  2. Порядок наложения в контексте наложения

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

Когда складывается контекст

  • Когда элемент является корневым элементом документа ( <html>элемент)
  • Когда элемент имеет значение позиции, отличное от static, и значение 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. Корневой элемент <html>стекового контекста (по умолчанию этот элемент является единственным стековым контекстом, но любой элемент может быть корневым элементом для стекового контекста, см. Правила выше)
    • Вы не можете поместить дочерний элемент за корневой контекстный элемент стека
  2. Позиционированные элементы (и их дочерние элементы) с отрицательными значениями z-index (более высокие значения располагаются перед более низкими значениями; элементы с одинаковым значением располагаются в соответствии с внешним видом в HTML)
  3. Непозиционированные элементы (упорядоченные по внешнему виду в HTML)
  4. Позиционируемые элементы (и их дочерние элементы) со значением z-index auto (упорядочены по внешнему виду в HTML)
  5. Позиционированные элементы (и их дочерние элементы) с положительными значениями z-index (более высокие значения располагаются перед более низкими значениями; элементы с одинаковым значением располагаются в соответствии с внешним видом в HTML)
Mr_Moneybags
источник
3
Некоторым это тоже может быть полезно: что никто не сказал вам о Z-Index
Mentalist
450

Добавить position: relative;в #over

    #over {
      width: 600px;
      z-index: 10;
      position: relative;    
    }
    
    #under {
      position: fixed;
      top: 5px;
      width: 420px;
      left: 20px;
      border: 1px solid;
      height: 10%;
      background: #fff;
      z-index: 1;
    }
    <!DOCTYPE html>
    <html>
    <body>
    	<div id="over">
    		Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
    	</div>  
    
    	<div id="under"></div>
    </body>
    </html>
Развернуть фрагмент

скрипка

stephenmurdoch
источник
14
updates.html5rocks.com/2012/09/… - это отличная справка о том, как фиксированная, абсолютная и относительная позиции взаимодействуют с z-index.
сделал
@marflar Мое удовольствие. Кстати, взгляни на свою скрипку. в конце есть дополнительный тег </body>и дополнительный тег </html>.
Мишель Айрес
2
Вот скрипка, демонстрирующая контекст стека. Это объясняется здесь .
kdbanman
Удаление position: relativeиз-за элемента фактически исправило мою проблему.
Алекс Дж
thanksssssss <3
Карл Энтони
32

г-индекс работает только в определенном контексте , т.е. relative, fixedили absoluteположение.

z-индекс для относительного div не имеет ничего общего с z-indexабсолютным или фиксированным div.

РЕДАКТИРОВАТЬ Это неполный ответ. Этот ответ предоставляет ложную информацию. Пожалуйста, просмотрите комментарий @ Dansingerman и пример ниже.

cusimar9
источник
3
Можете ли вы рассказать о том, как работает z-index в определенном контексте, и / или предоставить ссылку?
Дан Сингерман,
13
z-index влияет на порядок двух делений, даже если один является относительным положением, а другой - абсолютным.
Рафаэль
65
Этот ответ неверен. Вот скрипка, демонстрирующая контекст стека, как это объясняется здесь . @Dansingerman.
kdbanman
1
Спасибо за ваш jsFiddle @kbdanman, он помог мне понять контекст стекирования с помощью визуального элемента.
дхрувпатель
8
@JoeMorano, выше z ближе к вершине, независимо от абсолютного или относительного позиционирования. Важным является уровень в дереве документов. Div 4, 5, 6 - дети div 3, в то время как div 1 и 2 - братья и сестры div 3. Div 1 имеет больший z, чем div 3, поэтому div 1 находится сверху div 3 и всех его дочерних элементов. Div 2 имеет более низкий z, чем div 3, поэтому div 3 и все его дочерние элементы находятся на вершине div 2
kdbanman
31

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

Вот ваш пример на jsfiddle: Fiddle

редактировать : я вижу, кто-то уже упоминал этот ответ!

я серьезно
источник
18

Дайте #underотрицательный z-index, например-1

Это происходит потому, что z-indexсвойство игнорируется position: static;, что является значением по умолчанию; поэтому в коде CSS, который вы написали, z-indexэто 1для обоих элементов, независимо от того, как высоко вы его установили #over.

Давая #underотрицательное значение, то это будет позади любой z-index: 1;элемент, то есть #over.

Карлос Прециозо
источник
У меня тоже была эта проблема - установка «under» div в 0 работала для меня.
Мик Сир
5

Я строил навигационное меню. У меня есть overflow: hiddenв CSS моего nav, который спрятал все. Я думал, что это была проблема с z-index, но на самом деле я прятал все за пределами своей навигации.

thedanotto
источник
0

поведение фиксированных элементов (и абсолютных элементов), как определено в CSS Spec:

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

Это делает вычисление zindex немного сложным, я решил свою проблему (та же ситуация), динамически создавая контейнер в элементе body и перемещая все такие элементы (которые классифицируются как «my-fixed-ones» внутри этого элемента уровня тела) )

Бакши
источник