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

Question

I'm running into an issue hiding graphs in a modal. The user can click through the modal and the click events are hiding the other elements. However, some of the charts are out of the flow of the document by the hidden charts with position:absolute. I read up on position: absolute on MDN and the elements should be placed to their closest parent and they're not. Am I missing something?

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.

Screenshots

Graph in intended flow

Other Charts out of flow

Code

$(".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

When you apply the CSS style visibility: hidden , the element you have hidden is still part of the document flow. Though you cannot see the element, it takes up space in the layout and affects where sibling elements appear in the layout.

If you want to hide an element and not have that element continue to take up space and affect where other elements appear, use display: none

Elements with absolute position are taken out of the document flow. Their position is relative to the viewport. For example, an absolutely positioned element with top: 10px; left: 10px; top: 10px; left: 10px; would appear in the upper left hand corner of the viewport, 10 pixels from the top and 10 pixels from the left. If however, the parent container has position: relative , the absolute position of the child will be relative to its parent. Thus, the child would be 10 pixels from the top and 10 pixels from the left of its parent. not the viewport.

I hope this helps.