文檔流和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樣式：正確隱藏元素

回答

相關問題