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

У меня есть 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>

Ответы

Ответ 1

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

Решение

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

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

Итак, вы можете

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

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

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

  • Когда создается контекст укладки
    • По умолчанию элемент <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 требуется рендеринг в внеэкранном контексте, он должен создать новый контекст стекирования.

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

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

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

Ответ 2

Добавить 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>

Ответ 3

Неправильный ответ:

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

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

EDIT Это неполный ответ. Этот ответ предоставляет неверную информацию. Пожалуйста, просмотрите комментарий и пример @Dansingerman ниже.

Ответ 4

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

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

edit. Я вижу, что кто-то уже упомянул об этом ответе!

Ответ 5

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

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

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

Ответ 6

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

Ответ 8

Просто посмотрите документация MDN. Есть лучшее объяснение, которое я когда-либо видел.

Ответ 9

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

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

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