Каждая 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?
Кажется, что ваше исследование привело вас ко всем правильным ссылкам, вы просто не полностью поняли их значение. Элемент body не создает контекст стека. Это просто распространение фона на холст, вызывающее эффект, который вы видите.
@Alohci, вы говорите, что тег html
крадет (во время рендеринга) цвет фона и изображение из тега body
, и теперь тег body
отображается без фона.
Можно так поставить, да. Как только элемент html получил фон тела, этот фон затем отображается холстом, а не элементом html. Самое полное и актуальное описание находится в 2.11. Фоны специальных элементов.
@Alohci Я думаю, что в 2.11 отсутствует слово: «Однако, когда отображается элемент, фон которого будет использоваться для холста: нет, ...» Когда я явно делаю тег body
контекстом стека, результатом рендеринга является то же самое для второго примера.
Насчет пропущенного слова согласен. Я добавил ответ, чтобы продемонстрировать, что тело не создает контекст стека.
Если мы добавим границу к элементу 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>
Таким образом, мы можем быть уверены, что распространение фона тела на холст не приводит к тому, что тело создает контекст наложения — это просто аналогичный результат, когда тело не имеет границы.
Кажется, больше о том, является ли цвет фона полностью прозрачным или нет.