#CSS #Лаборатория_веб_платформы
Есть несколько причин, по которым дочерние боксы элементов, могут «вываливаться» из родительских.
Например, когда в дочернем боксе есть длинное неразрывое слово типа
Тунгнафедльсйёкюдль, «вырывающееся» за пределы контейнера.Или когда дочернему боксу задана ширина или высота явно больше, чем у родительского бокса.
Также если дочернему боксу заданы отрицательное значение
margin или элемент абсолютно спозиционирован так, что он выходит за пределы родителя.И известный способ ликвидировать эффект «вываливания» — применить свойство
overflow: hidden. В таком случае части бокса, вышедшие за пределы родительского элемента обрежутся без возможности доскроллить до них вручную.Но
overflow: hidden не всегда обрезает выходящее за пределы содержимое бокса. Есть исключение: абсолютно спозиционированный элемент не будет обрезаться родительским элементом с overflow: hidden, если родитель не является содержащим блоком (containing block), то есть ему не заданы position со значением absolute, relative или fixed.Пример:
<div class="overflow">
<div class="absolute-child">LonglonglonglonglongAbsolute</div>
<div class="static-child">LonglonglonglonglongStatic</div>
</div>
</div>
position: relative;
}
.overflow {
overflow: hidden;
}
.absolute-child {
position: absolute;
}
.static-child {
position: static;
}
В примере бокс
.absolute-child не обрезается по границам бокса .overflow, а при этом .static-child — обрезается, так как он имеет обычное позиционирование.Пример в codepen