Поток документов и стиль CSS: правильное скрытие элементов

Я столкнулся с проблемой скрытия графиков в модальном окне. Пользователь может щелкнуть модальное окно, а события щелчка скрывают другие элементы. Однако некоторые диаграммы не вписываются в документ из-за скрытых диаграмм с position:absolute. Я читал о позиции: absolute на MDN, и элементы должны быть помещены к их ближайшему родителю, а это не так. Я что-то пропустил?

absolute Элемент удаляется из обычного потока документов; место для элемента в макете страницы не создается. Вместо этого он позиционируется относительно своего ближайшего предка, если таковой имеется; в противном случае он размещается относительно исходного содержащего блока. Его конечное положение определяется значениями top, right, bottom и left. Это значение создает новый контекст стека, когда значение z-index не равно auto. Абсолютно позиционированные блоки могут иметь поля, и они не сворачиваются ни с какими другими полями.

Скриншоты

График в заданном потоке

Другие диаграммы вне потока

Код

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

javascript html jquery css kendo-ui
person node943034835    schedule 15.09.2017    source источник
comment
На самом деле это ближайший родитель. Таким образом, элемент будет позиционироваться относительно ближайшего родителя, у которого явно задана позиция (например, position: relative).   -  person Brian    schedule 16.09.2017

Ответы (1)


arrow_upward
0
arrow_downward

Когда вы применяете стиль CSS visibility: hidden, скрытый элемент остается частью потока документов. Хотя вы не можете видеть этот элемент, он занимает место в макете и влияет на то, где в макете появляются одноуровневые элементы.

Если вы хотите скрыть элемент и не допустить, чтобы этот элемент продолжал занимать место и влиять на появление других элементов, используйте display: none

Элементы с абсолютной позицией исключаются из документооборота. Их положение относительно области просмотра. Например, абсолютно позиционированный элемент с top: 10px; left: 10px; появится в верхнем левом углу окна просмотра, на 10 пикселей сверху и на 10 пикселей слева. Однако, если родительский контейнер имеет position: relative, абсолютная позиция дочернего элемента будет относительно его родителя. Таким образом, дочерний элемент будет на 10 пикселей сверху и на 10 пикселей слева от своего родителя. а не вьюпорт.

Надеюсь, это поможет.

person Neil Girardi    schedule 16.09.2017