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

у меня есть 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 на статическом элементе, но может ли кто-нибудь сказать мне почему это происходит?

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

9 366
css z-index

9 ответов:

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

решений

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

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

вы можете

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

Проблема

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

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

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

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

  • если элемент является корневым элементом документа (<html> элемент)
  • когда элемент имеет значение позиции, отличное от статического, и значение z-индекса, отличное от 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-индекса (более высокие значения укладываются перед более низкими значениями; элементы с тем же значением укладываются в соответствии с внешним видом в HTML)
  3. непозиционные элементы (упорядоченные по внешнему виду в HTML)
  4. позиционированные элементы (и их дочерние элементы) со значением Z-индекса auto (упорядоченным по внешнему виду в HTML)
  5. позиционированные элементы (и их дочерние элементы) с положительными значениями Z-индекса (более высокие значения укладываются перед более низкими значениями; элементы с тем же значением укладываются в соответствии с внешним видом в HTML)
78

добавить position: relative; to #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>

Скрипка

421

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

37

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

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

edit: Я вижу, кто-то уже упоминал этот ответ!

28

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

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

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

18

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

4

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

согласно перекрывая разделу элементов дальше http://web.archive.org/web/20130501103219/http://w3schools.com/css/css_positioning.asp

3

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

2

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

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

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

0