文档流和CSS样式：正确隐藏元素

我遇到了以模式隐藏图形的问题。用户可以点击模式，点击事件隐藏其他元素。但是，其中一些图表通过位置为绝对的隐藏图表超出了文档流程。我在MDN上读到了绝对的位置，元素应该放在他们最亲近的父母身上，而他们不是。我错过了什么吗？文档流和CSS样式：正确隐藏元素

绝对该元件是从正常的文件流中去除;在页面布局中没有为元素创建空间。相反，它相对于其最接近的定位祖先（如果有的话）被定位;否则，它被放置在相对于初始包含块的位置。其最终位置取决于顶部，右侧，底部和左侧的值。当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

来源

2017-09-15 Ryan Busby

它实际上是位置最接近的父母。因此，该元素将相对于具有明确设置位置的最接近的父元素进行定位（例如，position：relative） – Brian

当你申请的CSS样式visibility: hidden，您隐藏的元素仍然是文档流的一部分。尽管看不到该元素，但它占用了布局中的空间并影响了同级元素在布局中出现的位置。

如果你想隐藏的元素，并没有这样的元素继续占用空间，影响其他地方出现的元素，使用display: none

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

我希望这会有所帮助。

来源

2017-09-16 00:01:13

文档流和CSS样式：正确隐藏元素

回答

相关问题