Согласно MDN элементы с абсолютным позиционированием "... удаляются из обычного потока документов, и для элемента в макете страницы не создается пространство". Однако я вижу, что они занимают «горизонтальное пространство» (то есть область просмотра создает горизонтальную прокрутку, чтобы иметь возможность видеть элемент). Для минимального примера: https://codesandbox.io/s/intelligent-paper-023cj?file= / index. html
Тем не менее, иногда каким-то образом это «обрезает» (не создает эту полосу прокрутки, и элемент не занимает никакого места) в некоторый код, который я сделал. Хотя он закрепляется только на рабочем столе, в то время как на мобильном телефоне появляется та же горизонтальная полоса прокрутки. Для реального примера: Ссылка (проверьте раздел «Contacto» с использованием реального или смоделированного мобильного дисплея). Что я нахожу более странным, так это то, что только правая часть не обрезается, а левая - несмотря на наличие одного и того же кода (только позиционируются по-разному).
Вы можете проверить, что в обоих случаях оба <html>
и <body>
имеют правильную ширину, но область просмотра все еще расширяется, чтобы каким-то образом отобразить полный треугольник.
Я попытался установить скрытое переполнение, но оно скрывает весь треугольник вместо отсечения. Я попытался обрезать с помощью cli-path
, однако горизонтальное пространство все еще там, только изображение не появляется.
Так как же правильно обрезать мои абсолютно позиционированные элементы?