Можно ли установить порядок укладки псевдо-элементов ниже их родительского элемента?

Я пытаюсь стиль с элементом :after псевдо-элемент CSS-селектору

#element {
    position: relative;
    z-index: 1;
}

#element::after {
    position:relative;
    z-index: 0;
    content: " ";
    position: absolute;
    width: 100px;
    height: 100px;
}

кажется ::after элемент не может быть ниже, чем сам элемент.

есть ли способ, чтобы иметь псевдо элемент ниже, чем сам элемент?

7 217
css pseudo-element z-index

7 ответов:

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

#element { 
    position: relative;  /* optional */
    width: 100px;
    height: 100px;
    background-color: blue;
}

#element::after {
    content: "";
    width: 150px;
    height: 150px;
    background-color: red;

    /* create a new stacking context */
    position: absolute;
    z-index: -1;  /* to be below the parent element */
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Position a pseudo-element below its parent</title>
</head>
<body>
  <div id="element">
  </div>
</body>
</html>
276

Я знаю, что это старая тема, но я чувствую необходимость опубликовать правильный ответ. Фактический ответ на этот вопрос заключается в том, что вам нужно создать новый контекст стекирования на родительском элементе с псевдо-элементом (и вы на самом деле должны дать ему Z-индекс, а не просто позицию).

такой:

#parent {
    position: relative;
    z-index: 1;
}
#pseudo-parent {
    position: absolute;
    /* no z-index allowed */
}
#pseudo-parent:after {
    position: absolute;
    top:0;
    z-index: -1;
}

Это не имеет ничего общего с использованием :до или :после псевдо-элементов.

#parent { position: relative; z-index: 1; }
#pseudo-parent { position: absolute; } /* no z-index required */
#pseudo-parent:after { position: absolute; z-index: -1; }

/* Example styling to illustrate */
#pseudo-parent { background: #d1d1d1; }
#pseudo-parent:after { margin-left: -3px; content: "M" }
<div id="parent">
 <div id="pseudo-parent">
   &nbsp;
 </div>
</div>
211

здесь играют две проблемы:

  1. в спецификации CSS 2.1 указано, что " элементы :before и: after псевдо-элементов взаимодействуют с другими полями, такими как окна запуска, как если бы они были реальными элементами, вставленными только внутри их связанного элемента."Учитывая то, как Z-индексы реализованы в большинстве браузеров, довольно сложно (читай, я не знаю способа) переместить контент ниже, чем Z-индекс их родительского элемента в DOM, который работает во всех броузеры.

  2. номер 1 выше не обязательно означает, что это невозможно, но второе препятствие на самом деле хуже: в конечном итоге это вопрос поддержки браузера. Firefox вообще не поддерживал позиционирование сгенерированного контента до FF3.6. Кто знает о браузерах, таких как IE. Поэтому, даже если вы можете найти хак, чтобы заставить его работать в одном браузере, очень вероятно, что он будет работать только в этом браузере.

единственное, что я могу придумать, что происходит для работы в разных браузерах необходимо использовать javascript для вставки элемента, а не CSS. Я знаю, что это не отличное решение, но :до и :после псевдо-селекторов просто не похоже, что они собираются вырезать его здесь.

15

говоря относительно спецификации (http://www.w3.org/TR/CSS2/zindex.html), так как A.someSelector позиционируется, он создает новый контекст стекирования, из которого его дочерние элементы не могут вырваться. Оставьте a.someSelector непозиционным, а затем дочерний a.someSelector:after может быть расположен в том же контексте, что и A.someSelector.

11

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

изменить порядок элементов. Используйте :before псевдо-элемент для содержимого, которое должно быть внизу, и настроить поля для компенсации. Очистка полей может быть грязной, но желаемой z-index будут сохранены.

Я проверил это с IE8 и FF3.6 успешно.

9

попробовать

el {
  transform-style: preserve-3d;
}
el:after {
  transform: translateZ(-1px);
}
3

установить z-index на :before или :after псевдо элемент -1 и дать ему position Это честь z-index собственность (absolute,relative или fixed). Это работает, потому что псевдо элемент z-index относительно его родительского элемента, а не <html>, который является по умолчанию для других элементов. Что имеет смысл, потому что они являются дочерними элементами <html>.

проблема, с которой я столкнулся (что привело меня к этому вопросу и принятому ответу выше), заключалась в том, что я пытался использовать :after псевдо элемент, чтобы получить фантазии с фоном к элементу с z-index из 15, и даже когда установлен с z-index из 14, он все еще визуализировался поверх своего родителя. Это потому, что в этом контексте укладки, это родитель имеет z-index на 0.

надеюсь, это поможет немного прояснить, что происходит.

2