Скрытие переполнения из абсолютно позиционированного потомка в CSS

У меня есть абсолютно позиционированный элемент, который является дочерним элементом элемента с overflow:hidden, и я хотел бы, чтобы он был отрезан на краю родительского элемента, но элементы с абсолютным расположением похоже, игнорируют правила переполнения. Есть ли обходной путь для этого?Скрытие переполнения из абсолютно позиционированного потомка в CSS

http://www.brandonsmith.ninja

Смотрели на мобильном телефоне, тесселяции элементы, что я пытаюсь отрезать. В настоящее время документ выходит за пределы ширины окна просмотра.

источник

2016-03-14 Brandon Smith

Установить любое положение в контейнере, отличном от статического значения по умолчанию, и оно будет работать. – Banana

Это зависит. Вы хотите, чтобы выделенный элемент был относительно этого элемента? Если это так, позиция: relative обеспечит соблюдение переполнения: скрытый - и он должен быть там для начала. Увидев, что в качестве уступающего элемента нет смещений, добавление позиции: относительное не должно мешать чему-либо другому, кроме отсечения выбранного элемента. – BoltClock

Ориол, есть ли у вас ссылка на вопрос, который кажется дублирующим? –

Использовать position: relative; на втором контейнере. Это решит проблему. jsfiddle

<div class="container abs"> 
    <div class="child two"> 
    absolute positioning 
    </div> 
</div>

Для ваших мобильных проблем: добавить overflow-x: hidden; в <body> правил CSS.

.abs{ 
    position:relative; 
}

источник

2016-03-14 16:51:46 silviagreen

Спасибо за ответ. Хм ... Кажется, я точно не воспроизвел свой реальный случай использования, потому что это решение не работает для него. Я отредактировал вопрос соответствующим образом. –

где проблема на сайте? – silviagreen

Красный и оранжевый треугольники, но только при просмотре на мобильном видовом экране, достаточно маленьком для того, чтобы они уходили с края. Документ растет, чтобы соответствовать им, за пределами ширины окна просмотра. –

Скрытие переполнения из абсолютно позиционированного потомка в CSS

ответ

Смежные вопросы