javascript - 文档流和 CSS 样式 : Hiding elements properly

Question

我遇到了在模态中隐藏图表的问题。用户可以点击模式，点击事件隐藏了其他元素。然而，一些图表被隐藏的图表排除在文件的流程之外:position:absolute。我在 MDN 上阅读了 position: absolute ，元素应该放在它们最近的父级上，但事实并非如此。我错过了什么吗？

absolute The element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to its closest positioned ancestor if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left. This value creates a new stacking context when the value of z-index is not auto. Absolutely positioned boxes can have margins, and they do not collapse with any other margins.

截图

Graph in intended flow

Other Charts out of flow

代码

$(".table-bordered").css({'visibility': 'hidden'});
$(".kendoOptionsLinear").css({'visibility': 'hidden'});
$(".kendoOptionsChart").css({'visibility': 'hidden'});
$(".kendoOptionsRadial").css({'visibility': 'visible'});  






<div  style="position:relative">
 <div kendo-chart  class="kendoOptionsChart" 
   k-options="options1" style="position:absolute;"></div>
 <div kendo-radialGauge class="kendoOptionsRadial" 
   k-options="options2" style="position:absolute;"></div>
 <div kendo-linearGauge class="kendoOptionsLinear" 
   k-options="options3" style="position:absolute;"></div>
 <div kendo-radialGauge class="kendoOptionsRadial" 
   k-options="options4" style="position:absolute;"></div> 
</div

Answer 1

当您应用 CSS 样式 visibility: hidden 时，您隐藏的元素仍然是文档流的一部分。虽然您看不到该元素，但它会占用布局中的空间并影响同级元素在布局中的显示位置。

如果您想隐藏一个元素并且不想让该元素继续占用空间并影响其他元素出现的位置，请使用display: none

具有绝对位置的元素从文档流中取出。它们的位置是相对于视口(viewport)的。例如，一个绝对定位的元素 top: 10px; left: 10px; 将出现在视口(viewport)的左上角，距顶部 10 像素，距左侧 10 像素。但是，如果父容器具有 position: relative，则子容器的绝对位置将相对于其父容器。因此，子项距离其父项的顶部 10 个像素，距离其左侧 10 个像素。不是视口(viewport)。

希望对您有所帮助。