Поплавки и стековый контекст - PullRequest
Новая
       10

Поплавки и стековый контекст

0 голосов
/ 12 мая 2018

В качестве фона, ниже приведены два соответствующих раздела из спецификации W3C CSS2.1, глава 9 .

В каждом контексте стека, следующие слои закрашеныв начало:

  1. фон и границы элемента, формирующего контекст стека.
  2. дочерний контекст стека с отрицательными уровнями стека (сначала наиболее отрицательный).
  3. нисходящие потомки в потоке, не встроенные в уровень.
  4. не позиционированные поплавки.
  5. нисходящие потомки в потоке, встроенный уровеньвключая встроенные таблицы и встроенные блоки.
  6. дочерние контексты стека с уровнем стека 0 и позиционированные потомки с уровнем стека 0.
  7. дочерние контексты стека с положительными уровнями стека (сначала наименее положительный).

... и это:

Внутри каждого контекста стекирования позиционированные элементы с уровнем стека 0 (на уровне 6), непозиционированные поплавки (уровень4), инлинБлоки (уровень 5) и встроенные таблицы (уровень 5) окрашиваются так, как если бы эти элементы сами генерировали новые контексты стекирования, за исключением того, что их позиционированные потомки и любые потенциальные дочерние контексты стекирования принимают участие в текущем контексте стекирования.

Вопросы

  • Когда мы говорим, что «новый контекст стека» генерируется элементом, означает ли это, что ТОЛЬКО сам и его потомок (дочерний элемент)/ содержащее) элементы упорядочены в соответствии с новым контекстом стекирования, и что весь этот новый контекст стекирования упорядочен (атомарно) в контексте контекста стека корня (при условии отсутствия других контекстов)?
  • В приведенном ниже коде яиметь плавающие, не встроенные / не позиционированные потомки root и встроенные / не позиционированные потомки.В любом случае, плавающий элемент не отображается поверх блока не на уровне строки (на уровне блока), как, по-видимому, утверждается в спецификации.Только фон окрашен сверху.Почему это? 

.float {
  background-color: red;
  margin-right: -25px;
  border: 5px solid green;
  float: left;
  color: gray;
  font-size: 5rem;
}
.old {
  background: aqua;
  font-size: 3rem;
}
.new {
  background: yellow;
  font-size: 3rem;
}
 <span class="old">tesssss</span>
 <div class="float">testTwo</div>
 <div class="new">foo</div>

1 Ответ

0 голосов
/ 12 мая 2018

По второму вопросу, если мы проверим порядок рисования , у нас будет этот порядок:

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

Итак, теперь мы закрасили фоновый цвет элемента блока .new

  1. Все не позиционированные плавающие потомки, в древовидном порядке. Для каждого из них обработайте элемент так, как если бы он создал новый набор контекст, но любые позиционные потомки и потомки, которые на самом деле создать новый контекст стекирования считаются частью родительского контекст стека, а не этот новый.

Итак, теперь мы нарисовали весь элемент .float (фон и содержимое), потому что он создает собственный контекст стека. Таким образом, мы должны нарисовать все внутри, учитывая правила порядка рисования, а затем перейдем к следующим элементам.

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

На этом шаге мы нарисуем содержимое элемента .new и встроенного элемента .old

Итак, хитрость в том, что элемент .new закрашивается в два этапа: сначала это фон, а затем его содержимое. Между этими шагами мы нарисовали плавающий элемент.

...