Решил для себя добить некоторые вопросы по поводу того, как влияют абсолютно позиционированные блоки при их смещении или задании ширины на полосы прокрутки, особенно появления полос прокрутки в окне браузера.
Всё не так просто, как могло бы казаться по-началу.
В общем, в ходе простых экспериментов, которые не сложно повторить любому желающему (не буду пока приводить кучу вариантов), вырисовывается следующая картина.
Дано: просто абсолютно позиционированный div внутри которого какой-то текст на несколько, этот div находится внутри тега body, ничего более.
Так вот:
Горизонтальный скролл
- Если у div задано свойство width больше окна браузера, то у окна появится горизонтальный скролл;
- Если у div задано свойство width больше окна браузера, но задано положительное свойство right, то у окна горизонтальный скролл не появится, а содержимое div уедет за левый край окна;
- Если у div задано свойство width больше окна браузера, и задано положительное свойство left, то у окна появится горизонтальный скролл;
Вертикальный скролл
- Если у div задано свойство height больше окна браузера, то у окна появится вертикальный скролл;
- Если у div задано свойство height больше окна браузера, но задано положительное свойство bottom, то у окна вертикальный скролл не появится, а содержимое div уедет за верхний край окна;
- Если у div задано свойство height больше окна браузера, и задано положительное свойство top, то у окна появится вертикальный скролл;
Если свойство overflow:scroll у обёртывающего div не задано, то по умолчанию у него будет свойство overflow:visible, и содержимое внутреннего div просто вылезет за его границы.
И следует помнить, что для случая эксперимента со скроллом окна, положение div отсчитывается именно от окна браузера, а не тега body. В частности, у тега body нет высоты в нашем случае, и если вдруг вы зададите ему свойство position:relative, а нашему div положительное свойство bottom, то не удивляйтесь потом, почему div ушел за верхнюю границу окна. Это произошло потому, что отсчет его положения стал от тега body со свойством position:relative, а высоты у body нет, и он прижат сам к верху окна.