2016-11-25 15 views
0

Из W3C СайтаПочему элемент, расположенный абсолютно вне тела, вызывает горизонтальную полосу прокрутки?

В модели абсолютного позиционирования бокс явно смещен относительно его содержащего блока. Он полностью удаляется из нормального потока (он не влияет на последующих братьев и сестер).

Но когда я позиционирую элемент абсолютно, и он переполнен за пределами вида, он создает горизонтальную полосу прокрутки. Зачем? Я понимаю спецификации неправильно?

И есть ли способ предотвратить появление этой полосы прокрутки без использования overflow-x: hidden; на элементе корпуса?

+0

Есть много ответов - http://stackoverflow.com/q/36531708/483779 – Stickers

+0

_ [...] Это не влияет на более поздние siblings_, это правильно, но если оно переполнено вне тела, поведение браузера по умолчанию будет добавлять полосы прокрутки, чтобы помочь достичь этого элемента. Поэтому я бы догадался, что ответ «нет» **, нет возможности предотвратить полосы прокрутки без 'overflow-x: hidden;' (но это можно добавить в любой контейнер, не обязательно «body») –

+1

Да , Там есть. Поместите его абсолютно (без левого или правого значения), но используйте CSS-преобразование, чтобы оттолкнуть его от страницы. - https://jsfiddle.net/wss6Lsy0/ –

ответ

0

В зависимости от того, что ваша цели, один из вариантов является использование абсолютно позиционированной обертки с overflow: hidden; width: 100%, а затем расположить элементы (е & thinsp;.. Г тень на каждой стороне по центру контейнера оборачивать все содержимое страницы) внутри этой обертка.

+0

Я пошел с решением 'overflow-x: hidden;' в сочетании с медиа-запросом контрольные точки. При этом я не могу принять это как ответ на мой первоначальный вопрос, который просил решение, которое ** не использует ** переполнение: hidden; ' – Swen

+0

Fwiw, в вашем вопросе, который вы сказали о элементе' BODY' ('overflow: hidden' для' BODY' действительно вообще вреден), в то время как мой ответ предполагает использование 'overflow: hidden' для элемента _separate_ (что обычно безопасно, если используется для чисто декоративных целей), но поскольку вы не указали детали о вашей конкретной задаче (не стесняйтесь делать это сейчас или позже), мы не можем точно сказать, что применимо в вашем случае. –

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

  • Нет связанных вопросов^_^