Почему тег body является контекстом стека, в зависимости от цвета фона тега html

Каждая HTML-страница имеет контекст стека в корневом элементе (тег html).

В следующем примере тег html является (единственным) контекстом стека.

html {
background-color: gray;
}
body {
background: #222;
color: white;
box-sizing: border-box;
}
.box {
width: 200px;
height: 200px;
background-color: blue;
position: relative;
}
.box:before {
content: "";
background-color: tomato;
position: absolute;
z-index: -1;
inset: 0;
margin: -5px;
}
<h1>Header</h1>
<div class = "box"></div>

Псевдоэлемент (цвет помидора) рисуется за фоном тела (# 222), потому что он имеет z-index < 0.

Если мы удалим цвет фона тега html:

body {
background: #222;
color: white;
box-sizing: border-box;
}
.box {
width: 200px;
height: 200px;
background-color: blue;
position: relative;
}
.box:before {
content: "";
background-color: tomato;
position: absolute;
z-index: -1;
inset: 0;
margin: -5px;
}
<h1>Header</h1>
<div class = "box"></div>

Теперь псевдоэлемент (цвет помидора) рисуется после фона тела (#222). Это означает, что тег body теперь создает контекст стека.

Существует несколько правил, которые определяют, создает ли элемент контекст стека. Ни одно из правил не объясняет, почему тег body теперь является корнем контекста стека.

Аналогичный вопрос на SO объясняет из спецификаций, что холст использует фоновый цвет / изображение body, если тег html не имеет его. Возможно, это соответствует ранним дням HTML, когда эта информация была установлена ​​с атрибутами bgcolor и background тега body.

Вопрос в том, какая часть спецификации CSS является причиной того, что тег body создает контекст стека в зависимости от цвета фона html?

Кажется, больше о том, является ли цвет фона полностью прозрачным или нет.

Ouroborus 25.11.2022 01:34

Кажется, что ваше исследование привело вас ко всем правильным ссылкам, вы просто не полностью поняли их значение. Элемент body не создает контекст стека. Это просто распространение фона на холст, вызывающее эффект, который вы видите.

Alohci 25.11.2022 03:32

@Alohci, вы говорите, что тег html крадет (во время рендеринга) цвет фона и изображение из тега body, и теперь тег body отображается без фона.

rioV8 25.11.2022 04:22

Можно так поставить, да. Как только элемент html получил фон тела, этот фон затем отображается холстом, а не элементом html. Самое полное и актуальное описание находится в 2.11. Фоны специальных элементов.

Alohci 25.11.2022 04:35

@Alohci Я думаю, что в 2.11 отсутствует слово: «Однако, когда отображается элемент, фон которого будет использоваться для холста: нет, ...» Когда я явно делаю тег body контекстом стека, результатом рендеринга является то же самое для второго примера.

rioV8 25.11.2022 10:54

Насчет пропущенного слова согласен. Я добавил ответ, чтобы продемонстрировать, что тело не создает контекст стека.

Alohci 25.11.2022 18:39
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
6
56
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если мы добавим границу к элементу body, мы увидим, что на самом деле это не создает контекст стека. Если бы элемент body создавал контекст наложения, то поле было бы закрашено за границу. Но этого не происходит: граница закрашивается.

body {
  background: #222;
  color: white;
  box-sizing: border-box;
  border:3px solid yellow;
}
.box {
  width: 200px;
  height: 200px;
  background-color: blue;
  position: relative;
}
.box:before {
  content: "";
  background-color: tomato;

  position: absolute;
  z-index: -1;
  inset: 0;
  margin: -5px;
}
<h1>Header</h1>
<div class = "box"></div>

Напротив, если мы заставим тело создать контекст стека — в приведенном ниже примере я использовал для этого scale: 1 — мы увидим, что теперь прямоугольник действительно закрашивается поверх границы тела.

body {
  background: #222;
  color: white;
  box-sizing: border-box;
  border:3px solid yellow;
  scale: 1;
}
.box {
  width: 200px;
  height: 200px;
  background-color: blue;
  position: relative;
}
.box:before {
  content: "";
  background-color: tomato;

  position: absolute;
  z-index: -1;
  inset: 0;
  margin: -5px;
}
<h1>Header</h1>
<div class = "box"></div>

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

Другие вопросы по теме