我遇到了在模式中隐藏图形的问题。用户可以单击模式,而单击事件将隐藏其他元素。但是,某些图表不在位置为“绝对”的隐藏图表的文档流中。我仔细阅读以下内容:在MDN上是绝对的,元素应放置在最接近的父元素上,而不是在最接近的父元素上。我想念什么吗?
绝对
该元素已从常规文档流中删除;没有为页面布局中的元素创建空间。相反,它相对于其最接近的祖先(如果有)定位。否则,它相对于初始包含块放置。它的最终位置由top,right,bottom和left的值确定。当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
最佳答案
当您应用CSS样式visibility: hidden
时,隐藏的元素仍然是文档流的一部分。尽管您看不到元素,但它会占用布局中的空间并影响同级元素在布局中的显示位置。
如果要隐藏元素而不让该元素继续占用空间并影响其他元素的显示位置,请使用display: none
具有绝对位置的元素将从文档流中取出。它们的位置相对于视口。例如,带有top: 10px; left: 10px;
的绝对定位的元素将出现在视口的左上角,距顶部10像素,距左侧10像素。但是,如果父容器具有position: relative
,则子容器的绝对位置将相对于其父容器。因此,子级将比其父级的顶部高10个像素,而左侧则距其10个像素。不是视口。
我希望这有帮助。