Position:absolute и скролл
Добавлено: 13 апр 2017, 19:20
Т. к. я люблю докапываться до истины (конечно, когда полученные знания на практике полезны будут, а не просто так ), порой всякие квесты образовываются, например, старый пост на htmlforum.io
Решил для себя добить некоторые вопросы по поводу того, как влияют абсолютно позиционированные блоки при их смещении или задании ширины на полосы прокрутки, особенно появления полос прокрутки в окне браузера.
Всё не так просто, как могло бы казаться по-началу.
В общем, в ходе простых экспериментов, которые не сложно повторить любому желающему (не буду пока приводить кучу вариантов), вырисовывается следующая картина.
Дано: просто абсолютно позиционированный div внутри которого какой-то текст на несколько, этот div находится внутри тега body, ничего более.
Так вот:
Если свойство overflow:scroll у обёртывающего div не задано, то по умолчанию у него будет свойство overflow:visible, и содержимое внутреннего div просто вылезет за его границы.
И следует помнить, что для случая эксперимента со скроллом окна, положение div отсчитывается именно от окна браузера, а не тега body. В частности, у тега body нет высоты в нашем случае, и если вдруг вы зададите ему свойство position:relative, а нашему div положительное свойство bottom, то не удивляйтесь потом, почему div ушел за верхнюю границу окна. Это произошло потому, что отсчет его положения стал от тега body со свойством position:relative, а высоты у body нет, и он прижат сам к верху окна.
Решил для себя добить некоторые вопросы по поводу того, как влияют абсолютно позиционированные блоки при их смещении или задании ширины на полосы прокрутки, особенно появления полос прокрутки в окне браузера.
Всё не так просто, как могло бы казаться по-началу.
В общем, в ходе простых экспериментов, которые не сложно повторить любому желающему (не буду пока приводить кучу вариантов), вырисовывается следующая картина.
Дано: просто абсолютно позиционированный 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 нет, и он прижат сам к верху окна.