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 статичний елемент, але хтось може мені сказати, чому це відбувається?

(Здається, це питання подібне до цього (( Виправлене позиціонування, порушуючи z-індекс ), але воно не має задовільної відповіді, тому я запитую це тут зі своїм прикладом коду)

css  z-index 
— DanSingerman
джерело

Відповіді:

146

Це питання можна вирішити різними способами, але насправді, знання правил укладання дозволяє знайти найкращу відповідь, яка працює для вас.

Рішення

<html>Елемент вашого єдиного штабелирования контекст, так що просто дотримуйтесь штабелирование правил всередині контексту стек , і ви побачите , що елементи укладені в зазначеному порядку

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

Так можна

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

Справжня проблема

Перш ніж намагатися змінити порядок складання елементів, розробники повинні знати наступне.

  1. Коли формується контекст укладання
    • За замовчуванням <html>елемент є кореневим елементом і є контекстом першого укладання
  2. Порядок складання в контексті укладання

Нижче наведені порядок укладання та контекстні правила укладання

Коли формується контекст укладання

  • Коли елемент є кореневим елементом документа ( <html>елемент)
  • Коли елемент має значення позиції, відмінне від статичного, і z-індексне значення, відмінне від автоматичного
  • Коли елемент має значення непрозорості менше 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-індексу автоматично (впорядковано за появою в HTML)
  5. Позиціоновані елементи (та їхні діти) з позитивними значеннями z-індексу (більш високі значення розміщуються перед нижчими значеннями; елементи з тим же значенням укладаються відповідно до появи в HTML)
— Mr_Moneybags
джерело
3
Для
— менталіст
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-індексом.
— Чи був
@marflar Моє задоволення. Btw, поглянь на свою загадку. є додатковий тег </body>та додатковий тег </html>у підсумку.
— Мішель Айрес
2
Ось скрипка, що демонструє контекст укладання. Це пояснено тут .
— kdbanman
Видалення position: relativeз-над елемента фактично вирішило мою проблему.
— Алекс Г
thanksssssss <3
— Карл Ентоні Балуйо
32

z-індекс працює лише в конкретному контексті, тобто relative, fixedабо absoluteпозиції.

z-індекс для відносного діва не має нічого спільного з z-indexабсолютно або фіксованим ділом.

EDIT Це неповна відповідь. Ця відповідь надає неправдиву інформацію. Перегляньте коментар та приклад @ Dansingerman нижче.

— кузимар9
джерело
3
Чи можете ви розширити, як z-індекс працює в конкретному контексті та / або надати посилання?
— DanSingerman
13
z-індекс впливає на порядок двох дівок, навіть якщо одна позиція відносна, а інша - абсолютна.
— Раффаель
65
Ця відповідь неправильна. Ось скрипка, що демонструє контекст укладання, як це пояснено тут . @Dansingerman.
— kdbanman
1
Дякуємо за ваш jsFiddle @kbdanman, він допоміг мені зрозуміти контекст укладання з візуальним.
— dhruvpatel
8
@JoeMorano, Вища z ближче до вершини, незалежно від абсолютного чи відносного розміщення. Важливим є рівень у дереві документів. Divs 4, 5, 6 є дітьми div 3, тоді як div 1 і 2 є побратимами діву 3. Div 1 має вищу z, ніж div 3, тому div 1 знаходиться на вершині div 3 та всіх його дітей. У Div 2 нижчий z, ніж у Div 3, тому div 3 та всі його діти перебувають на вершині div 2
— kdbanman
31

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

ось ваш приклад на jsfiddle: Скрипки

редагувати : я бачу, хтось уже згадував цю відповідь!

— я говорю серйозно
джерело
18

Наведіть #underнегатив z-index, напр-1

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

Давши #underнегативне значення, воно буде відставати від будь-якого z-index: 1;елемента, тобто #over.

— Карлос Пресіосо
джерело
У мене була і ця проблема - встановлення діва "under" на 0 працювало на мене.
— Мік Сір
5

Я будував меню наві. У мене є overflow: hiddencss свого наві, який все приховував. Я думав, що це проблема з z-індексом, але насправді я приховував усе поза своїм навігацією.

— thedanotto
джерело
0

поведінка нерухомих елементів (та абсолютних елементів), визначених у CSS Spec:

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

Це робить обчислення zindex трохи складним, я вирішив свою проблему (та сама ситуація), динамічно створивши контейнер в елементі тіла та перемістивши всі такі елементи (які класифікуються як "мої фіксовані" всередині цього елемента рівня тіла )

— Бахши
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.