Question

我遇到了隐藏模式中的图形的问题。用户可以单击模态，单击事件将隐藏其他元素。但是，某些图表不受隐藏图表位置的文件流量的影响：position：absolute。我读到了位置：绝对在MDN上，元素应该放在他们最亲近的父母身上而他们不是。我错过了什么吗？

绝对该元素从正常文档流中删除;没有为页面布局中的元素创建空间。相反，它相对于其最近定位的祖先（如果有的话）定位;否则，它相对于初始包含块放置。它的最终位置由顶部，右侧，底部和左侧的值决定。当z-index的值不是auto时，此值将创建新的堆栈上下文。绝对定位的盒子可以有边距，并且它们不会与任何其他边缘一起折叠。

截图

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

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

我希望这会有所帮助。

文件流程＆amp; CSS样式：正确隐藏元素

1 个答案: