Question

Рассмотрим следующий код:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>HTML</title>
  <meta charset="utf-8" />

  <style type="text/css">

    h1 {
      font-size: 2em;
      font-family: Verdana;
      font-weight: bold;
    }

    p {
      border: 3px solid blue;
      margin-top: -50px;
      background-color: green;
      color: white;
    }

  </style>

</head>

<body>

  <h1>QUESTION</h1>
  <p>The header text in the preceding h1 element is behind this
    paragraph's text (as expected), but on top of this paragraph's
    background and border (not expected).
  </p> 

</body>

</html>

См. Пример здесь: http://jsfiddle.net/ZKHc9/

Почему фон и рамка абзаца не отображаются поверх заголовка, как содержимое?

Patrick Fisher · Answer 1 · 11 марта 2011

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

Два входящих в поток, не позиционированных блока не строго "выше" или "ниже" друг друга - их содержимое и фоны складываются отдельно .

Добавление position: relative сделает элемент позиционированным (с z-index: auto) и поместит его над непозиционированными элементами в том же контексте стека: он будет визуализирован на шаге 8 в алгоритме рисования ниже.

Если вы внимательно прочитаете спецификацию CSS2 Подробное описание стековых контекстов , вы увидите, что это правильное поведение.

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

Соответствующие шаги в алгоритме рисования:

...

...

...

Для всех его входящих, непозиционируемых, потомков уровня блока в древовидном порядке: если элемент является блоком, элементом списка или другим эквивалентным блоком:

Цвет фона элемента.

фоновое изображение элемента.

граница элемента.

...

...

... для всех входящих, непозиционируемых, потомков уровня блока в древовидном порядке:

...

... для каждой строки этого элемента:

Для каждого блока, который является дочерним для этого элемента, в этом линейном блоке в древовидном порядке:

...

...

...

Для встроенных элементов:

Для всех входящих, непозиционированных, дочерних элементов элемента в потоке которые находятся в этом поле строки, и все фрагменты текста внутри элемента, который находится в этой строке коробка, в древовидном порядке:

Если это бег текста, то:

...

...

текст.

...

...

...

...

Плавающие и позиционированные элементы всегда «атомарны» - их фоны и содержимое будут отображаться вместе за один шаг (шаг 3, 5, 8 или 9). Но в потоке, непозиционированные блочные элементы в одном и том же контексте стека имеют все свои фоны, представленные (в шаге 4), а затем все их содержимое визуализируются (в шаге 7).

В этом случае для находящихся в потоке, непозиционированных родственных элементов H1 и P (H1 перед P в дереве), шаг 4 визуализирует фон H1 и затем фон P, затем шаг 7 визуализирует содержимое H1, а затем содержание Р.

Tim Hettler · Answer 2 · 11 марта 2011

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

Добавить это в CSS:

position: relative;
z-index: 2;

порядок в стеке html

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 2 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

порядок в стеке html

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 2 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Нет похожих вопросов