CSS (Cascading Style Sheets) — каскадные таблицы стилей.
CSS — это язык представления внешнего вида документа, написанного с использованием языка разметки.

Position:absolute и скролл

Александр » 13 апр 2017, 19:20

Т. к. я люблю докапываться до истины (конечно, когда полученные знания на практике полезны будут, а не просто так :D ), порой всякие квесты образовываются, например, старый пост на htmlforum.io
Решил для себя добить некоторые вопросы по поводу того, как влияют абсолютно позиционированные блоки при их смещении или задании ширины на полосы прокрутки, особенно появления полос прокрутки в окне браузера.
Всё не так просто, как могло бы казаться по-началу.
В общем, в ходе простых экспериментов, которые не сложно повторить любому желающему (не буду пока приводить кучу вариантов), вырисовывается следующая картина.
Дано: просто абсолютно позиционированный div внутри которого какой-то текст на несколько, этот div находится внутри тега body, ничего более.
Так вот:

Горизонтальный скролл


  • Если у div задано свойство width больше окна браузера, то у окна появится горизонтальный скролл;
  • Если у div задано свойство width больше окна браузера, но задано положительное свойство right, то у окна горизонтальный скролл не появится, а содержимое div уедет за левый край окна;
  • Если у div задано свойство width больше окна браузера, и задано положительное свойство left, то у окна появится горизонтальный скролл;

Вертикальный скролл


  • Если у div задано свойство height больше окна браузера, то у окна появится вертикальный скролл;
  • Если у div задано свойство height больше окна браузера, но задано положительное свойство bottom, то у окна вертикальный скролл не появится, а содержимое div уедет за верхний край окна;
  • Если у div задано свойство height больше окна браузера, и задано положительное свойство top, то у окна появится вертикальный скролл;
Все эти правила появления полос прокрутки действуют и к случаю, когда div будет не просто в окне, а обернут в другой див с фиксированной высотой или шириной и заданным свойством overflow:scroll;, полосы прокрутки у него будут появляться по таким же правилам.
Если свойство overflow:scroll у обёртывающего div не задано, то по умолчанию у него будет свойство overflow:visible, и содержимое внутреннего div просто вылезет за его границы.
И следует помнить, что для случая эксперимента со скроллом окна, положение div отсчитывается именно от окна браузера, а не тега body. В частности, у тега body нет высоты в нашем случае, и если вдруг вы зададите ему свойство position:relative, а нашему div положительное свойство bottom, то не удивляйтесь потом, почему div ушел за верхнюю границу окна. Это произошло потому, что отсчет его положения стал от тега body со свойством position:relative, а высоты у body нет, и он прижат сам к верху окна.
Александр
 
Сообщения: 397
Зарегистрирован: 20 мар 2014, 17:05

Position:absolute и скролл

Bolshoi-Max » 07 июн 2017, 14:58

Ещё стоит по бэкграунды тему сделать, как их тянуть, а именно, про свойство background-size.
Немного не по теме, но создал топик Генератор бэкграунд-плитки для сайта, может кто подскажет по вопросу..
Bolshoi-Max
 
Сообщения: 14
Зарегистрирован: 15 июл 2014, 08:43


Вернуться в CSS