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

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

391 голосов
/ 07 марта 2011

У меня есть 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-index ), но он не имеет удовлетворительного ответа, поэтому я задаю его здесь с примером кода)

Ответы [ 8 ]

436 голосов
/ 07 марта 2011

Добавить position: relative; к # более 

    #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>

Скрипка

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

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

* Решения 1003 * Элемент <html> является вашим единственным контекстом стекирования, поэтому просто следуйте правилам стекирования внутри контекста стекирования, и вы увидите, что элементы располагаются в этом порядке Корневой элемент стекового контекста (в данном случае элемент <html>) Позиционируемые элементы (и их дочерние элементы) с отрицательными значениями z-index (более высокие значения располагаются перед более низкими значениями; элементы с одинаковым значением располагаются в соответствии с внешним видом в HTML) Непозиционированные элементы (упорядоченные по внешнему виду в HTML) Позиционируемые элементы (и их дочерние элементы) со значением z-индекса auto (упорядочены по внешнему виду в HTML) Позиционируемые элементы (и их дочерние элементы) с положительными значениями z-index (более высокие значения располагаются перед более низкими значениями; элементы с одинаковым значением располагаются в соответствии с внешним видом в HTML) Так что вы можете установить z-индекс -1, для #under позиционированный -ve z-индекс появляется за не позиционированным #over элементом установить положение #over на relative, чтобы к нему применялось правило 5 Настоящая проблема

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

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

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

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

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

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

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

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

29 голосов
/ 07 марта 2011

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

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

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

18 голосов
/ 02 июля 2012

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

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

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

5 голосов
/ 12 января 2017

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

3 голосов
/ 26 мая 2013

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

в соответствии с разделом «Перекрывающиеся элементы» на http://web.archive.org/web/20130501103219/http://w3schools.com/css/css_positioning.asp

0 голосов
/ 11 июня 2013

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

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

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

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

Похожие темы

...