Flux de documents et style CSS: Masquage correct des éléments

Question

Je suis confronté à un problème de masquage de graphiques dans un modal. L'utilisateur peut cliquer sur le modal et les événements de clic cachent les autres éléments. Cependant, certains des graphiques sont hors du flux du document par les cartes cachées avec la position: absolue. Je lis sur la position: absolute sur MDN et les éléments doivent être placés sur leur parent le plus proche et ils ne le sont pas. Est-ce que je manque quelque chose?

absolue L'élément est retiré du flux normal du document; aucun espace n'est créé pour l'élément dans la mise en page. Au lieu de cela, il est positionné par rapport à son ancêtre positionné le plus proche s'il y en a un; sinon, il est placé par rapport au bloc conteneur initial. Sa position finale est déterminée par les valeurs de haut, droite, bas et gauche. Cette valeur crée un nouveau contexte d'empilement lorsque la valeur de z-index n'est pas auto. Les cases parfaitement positionnées peuvent avoir des marges et ne s'effondrent pas avec d'autres marges.

Captures d'écran

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

Lorsque vous appliquez le style CSS visibility: hidden, l'élément que vous avez masqué fait toujours partie du flux de documents. Bien que vous ne puissiez pas voir l'élément, il prend de l'espace dans la mise en page et affecte l'endroit où les éléments frères apparaissent dans la mise en page.

Si vous souhaitez masquer un élément et ne pas avoir cet élément continuent à prendre de l'espace et affecter d'autres éléments où apparaissent, utilisez display: none

éléments de position absolue sont prises hors du flux de documents. Leur position est relative à la fenêtre d'affichage. Par exemple, un élément positionné de manière absolue avec top: 10px; left: 10px; apparaît dans le coin supérieur gauche de la fenêtre, 10 pixels à partir du haut et 10 pixels à partir de la gauche. Si toutefois, le conteneur parent a position: relative, la position absolue de l'enfant sera relative à son parent. Ainsi, l'enfant serait à 10 pixels du haut et à 10 pixels de la gauche de son parent. pas la fenêtre d'affichage.

J'espère que cela aide.