Определение элементов в дереве рендеринга

Question

В контексте веб-браузера дерево визуализации содержит только элементы, которые будут видны на веб-странице. Поэтому элементы с display: none не попадут в дерево рендеринга. Но я понимаю, что такие элементы, как height: 0 и position : absolute; left: 100%, включены в дерево визуализации, даже если они не будут видны на веб-странице при визуализации. Так почему же такие элементы все еще включены в дерево рендеринга?

Answer 1

• Поскольку они все еще могут содержать видимые дочерние узлы:

.no-height {
  height: 0;
};
.absolute {
  position: absolute;
}

<div class="no-height">
  <p class="absolute">still here</p>
</div>

• Поскольку они все еще могут иметь границы или поля, которые могут быть видимы

.no-height {
  height: 0;
  border: 5px solid;
  margin: 120px;
};

<div class="no-height">
</div>
I should be at top

• Поскольку они могут иметь некоторое влияние на другие видимые узлы:

.no-height {
  height: 0;
};

<div>
  some inline<div class="no-height"></div>text
</div>

• ...