Незаметен для посетителя бесконечный скроллинг. Бесконечная Прокрутка Страниц: Особенности И Идеи. Как это работает

Описание

Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

Синтаксис

position: absolute | fixed | relative | static | inherit

Значения

absolute Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left , top , right и bottom , также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed , relative или absolute , то отсчет координат ведется от края родительского элемента. fixed По своему действию это значение близко к absolute , но в отличие от него привязывается к указанной свойствами left , top , right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Браузер Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента. relative Положение элемента устанавливается относительно его исходного места. Добавление свойств left , top , right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. static Элементы отображаются как обычно. Использование свойств left , top , right и bottom не приводит к каким-либо результатам. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства position

Объектная модель

document.getElementById("elementID ").style.position

Браузеры

Браузер Internet Explorer 6 значение fixed не поддерживает. Internet Explorer до версии 8.0 не поддерживает значение inherit .

Позиционирование задаётся с помощью свойства position . Свойство может иметь четыре значения, которые мы и рассмотрим.

Абсолютное позиционирование

Абсолютное позиционирование задается так:

Position: absolute

После этого блок теряет свои привычные свойства и полностью выпадает из потока. Что представляет собой поток в данном контексте? Попробуйте расположить в разметке несколько блочных элементов подряд. Они будут идти друг за другом. Это стандартное поведение блоков по умолчанию. Если блоку присвоить абсолютное позиционирование, то он полностью выпадает из потока, другие блоки просто перестают замечать его, но при этом элемент остается на странице. Абсолютное позиционирование часто применяется для точной расстановки отдельных элементов.

Теперь его можно перемещать с помощью свойств left , right , top и bottom . По умолчанию перемещение происходит относительно сторон окна браузера, но если у родительского элемента задано position: relative , то смещение происходит относительно родительского блока.

Block{ position: absolute; bottom: 0; right: 0; background: gray; }

Элемент с классом block будет сдвинут в нижний правый угол браузера.

Рассмотрим пример, когда блок находится внутри родительского элемента.

Блок внутри родительского элемента

Мы сначала родительскому контейнеру записали относительное позиционирование (relative ), а для элемента block задали абсолютное. В результате отсчет координат будет происходить не от самого окна браузера, а от краев элемента родителя, то есть блока wrapper .

Относительное позиционирование

Относительное позиционирование записывается так – position: relative . Координаты задаются такими же свойствами, как и при абсолютном позиционировании. Единственное существенное отличие заключается в том, что элемент формально не выпадает из потока – под него остается место.

Работу этого значения можно сравнить с visibility: hidden , когда элемент скрывается со страницы, но место под него остается нетронутым. Блок можно двигать куда угодно, но место под него остается пустым и его не займут другие части. Сдвинуть блок можно с помощью свойств top , left и так далее.

Помните, что смещение происходит не от краев окна браузера, а от того места, где изначально стоял блок.

Стандартный блок

Стандартный блок

Блок подвинется на 50 пикселей вправо и на 10 вверх. Но его место осталось нетронутым.

Стандартный блок

Как видите, можно задавать и отрицательные значения.

Фиксированное позиционирование

Распространённый вариант, когда при прокрутке элемент словно приклеивался к одному месту. Например, часто используется в шапке сайта. В основном это реализуется с помощью фиксированного позиционирования. Для этого нужно записать:

Block{ position: fixed; }

По поведению фиксированное смещение схоже с абсолютным – элемент выпадает из нормального потока, его место освобождается и другие элементы вообще его не замечают. С помощью такого приема можно очень легко сделать верхние, нижние, боковые панели на своем сайте, которые не будут исчезать при прокрутке и всегда находиться на виду.

Статическое позиционирование

Последний вид – статическое позиционирование, это обычное поведение блочный элементов. Его не нужно прописывать, потому что оно стоит по умолчанию. Но иногда position: static используют, чтобы отменить другой вид позиционирования при определенных событиях на веб-странице в сценариях JavaScript.

Позиционирование — одно из ключевых понятий в блочной верстке. Разобравшись с ним, вам многое станет понятно, а верстка из шаманства превратится в осмысленный процесс. Итак, речь в статье пойдет о CSS-свойствах position и float .

1. position: static

По умолчанию все элементы на странице имеют статическое позиционирование (position: static), это означает, что элемент не позиционирован, и появляется в документе на своем обычном месте, то есть в том же порядке, как и в html-разметке.

Нет необходимости специально назначать это свойство какому-либо элементу, если только вам не требуется изменить ранее установленное позиционирование на дефолтное.

#content{ position: static; }

2. position:relative

Относительное позиционирование (position: relative) позволяет вам использовать свойства: top, bottom, left и right, для расположения элемента относительно того места, где бы он появился при обычном позиционировании.

Давайте переместим #content на 20 пикселей вниз, и на 40 пикселей влево:

#content{ position: relative; top: 20px; left: -40px; }

Обратите внимание, что на том месте, где бы должен был находится наш блок #content, теперь образовалось пустое пространство. Следующий за блоком #content, блок #footer не переместился ниже, потому что, #content по-прежнему занимает свое место в документе, несмотря на то, что мы передвинули его.

На данном этапе может показаться, что относительное позиционирование не так уж и полезно, но, не спешите с выводами, далее в статье, вы узнаете, для чего его можно использовать.

3. position: absolute

При абсолютном позиционировании (position: absolute), элемент удаляется из документа, и появляется там, где вы ему скажете.

Давайте, для примера, переместим блок #div-1a в верхний, правый угол страницы:

#div-1a { position:absolute; top:0; right:0; width:200px; }

Обратите внимание, что на этот раз, поскольку блок #div-1a был удален из документа, оставшиеся элементы на странице расположились по-другому: #div-1b, #div-1c и #footer переместились выше, на место удаленного блока. А сам блок #div-1a, расположился точно в правом, верхнему углу страницы.

Таким образом, мы можем позиционировать любой элемент относительно страницы, однако этого не достаточно. На самом деле, нам необходимо позиционировать #div-1a относительно родительского блока #content. И на этом этапе, относительное позиционирование вновь вступает в игру.

4. position: fixed

Фиксированное позиционирование (position: fixed), является подразделом абсолютного позиционирования. Единственное его отличие в том, что он всегда находится в видимой области экрана, и не двигается во время прокрутки страницы. В этом отношении, он немного похож на фиксированное фоновое изображение.

#div-1a { position:fixed; top:0; right:0; width:200px; }

В IE с position: fixed не все так гладко, как бы нам хотелось, но существует множество способов обойти эти ограничения.

5. position:relative + position:absolute

Назначив блоку #content относительное позиционирование (position: relative), мы сможем позиционировать любые дочерние элементы, относительно его границ. Давайте разместим блок #div-1a, в верхнем правом углу блока #content.

#content { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; }

6. Две колонки

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

#content { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; } #div-1b { position:absolute; top:0; left:0; width:200px; }

Одним из преимуществ абсолютного позиционирования, является возможность размещать элементы в произвольном порядке, независимо от того, как именно они расположены в разметке. В приведенном выше примере, блок #div-1b расположен перед блоком #div-1a.

А сейчас у вас должен был возникнуть вопрос: “А куда же делись остальные элементы из нашего примера?”. Они скрылись под абсолютно расположенными блоками. К счастью, есть возможность это исправить.

7. Две колонки с фиксированной высотой

Одно из решений – задать фиксированную высоту контейнеру, содержащему колонки.

#content { position:relative; height: 450px; } #div-1a { position:absolute; top:0; right:0; width:200px; } #div-1b { position:absolute; top:0; left:0; width:200px; }

Решение не очень подходящее, поскольку мы никогда не знаем заранее, какого размера текст, будет расположен в колонках, и какой шрифт будет использован.

8. Float

Для колонок с переменной высотой, абсолютное позиционирование не подходит, поэтому давайте рассмотрим другой вариант.

Назначив блоку float, мы максимально возможно оттолкнем его к правому (или левому) краю, а следующий за блоком текст, будет обтекать его. Обычно такой прием используется для картинок, но мы будем использовать его для более сложной задачи, поскольку это единственный инструмент, имеющийся в нашем распоряжении.

#div-1a { float:left; width:200px; }

9. “Плавающие” колонки

Если назначить первому блоку float: left, а затем второму float: left, каждый из блоков прижмется к левому краю, и мы получим две колонки, с переменной высотой.

#div-1a { float:left; width:150px; } #div-1b { float:left; width:150px; }

Также, можно назначить колонкам противоположное значение float, в этом случае, они распределятся по краям контейнера.

#div-1a { float:right; width:150px; } #div-1b { float:left; width:150px; }

Но теперь у нас появилась другая проблема – колонки выходят за пределы родительского контейнера, тем самым ломая всю верстку. Эта самая распространенная проблема начинающих верстальщиков, хотя решается она довольно просто.

10. Очистка float

Чистку флоатов можно делать двумя способами. Если после колонок идет еще один блок, достаточно назначить ему clear: both.

#div-1a { float:left; width:190px; } #div-1b { float:left; width:190px; } #div-1c { clear:both; }

Или же назначить родительскому контейнеру свойство overflow: hidden

#content { overflow:hidden; }

В любом случае, результат будет один и тот же.

Заключение

Сегодня были рассмотрены только базовые приемы позиционирования, и самые простые примеры. Также, в помощь начинающим верстальщикам я всегда рекомендую цикл статей Ивана Сагалаева, которые в свое время мне очень помогли.

Верстальщики-новички нередко испытывают трудности с позиционированием элементов через CSS . На самом деле свойство CSS Position куда проще в освоении, чем кажется на первый взгляд. Овладев им, вы получите мощный инструмент, с помощью которого можно расположить все элементы страницы в нужных местах. Но чтобы добиться результата, нужно знать обо всех существующих значениях, поскольку принципы их действия сильно различаются

Специфика построения потока документа

работает с потоком веб-страницы. Как это понять? По умолчанию все элементы страницы располагаются в том порядке, в котором вы создали их в html- разметке. Если тег header расположен над тегом footer, то и на странице он будет отображаться выше. И наоборот, если вы почему-то решите разместить footer в html над «хедером», «подвал» страницы будет отображаться над «шапкой». При этом блочные элементы занимают всю доступную для них ширину. Строчные, в свою очередь, располагаются в одну строку, пока не займут ее всю, а потом начнут переноситься на новую. Этот порядок именуется «потоком документа».

Для изменения поведения потока используется свойство Position в CSS . Также он может меняться из-за свойства float, но его мы рассматривать не будем. С помощью позиционирования можно заставить элемент «выпасть» из обычного потока, после чего он начнет вести себя по-новому. Как именно - зависит от использованного значения свойства.

CSS Position: static

Position: static, или статическое позиционирование, является значением по умолчанию для всех блоков html, которые вы создали. В обычных условиях вам не придется иметь с ним дело. Если для какого-нибудь блока или строки не задано вообще никакого позиционирования, значит, оно имеет значение static. На странице такой компонент отображается в соответствии с потоком. Если указать ему свойства right/left или top/bottom, никакого эффекта не будет.

CSS Position: fixed

При использовании этого свойства элемент оказывается вне нормального потока документа. Теперь его положение вычисляется относительно окна браузера, независимо от того, как размещаются прочие компоненты. Другими словами, блок с Position : fixed отправится в верхнюю часть страницы, прижмется к краю окна браузера, а прочие элементы займут его место в соответствии с потоком.

Главная особенность фиксировано позиционированных элементов в том, что они могут перекрывать другие блоки и строки страницы. При скроллинге блок с Position : fixed будет будто бы оставаться на месте, не исчезая с экрана. Это полезно, если вам нужно сделать навигацию или аналогичный элемент, к которому пользователь всегда должен иметь доступ. Фиксированное позиционирование также применяется, если нужно разместить кнопку быстрого скроллинга в определенную часть страницы.

CSS Position: relative

Использование этого свойства называется относительным позиционированием . Если задать элементу свойство Position : relative, тот останется на своем месте. На первый взгляд, ничего особенного не произойдет, но все измениться, если дополнительно использовать свойства right/left и top/bottom. С их помощью можно управлять перемещением компонента относительно его местоположения. На том месте, где блок или строка были раньше, окажется пустое пространство - другие элементы останутся на своих положениях, не обращая внимания на освободившееся место .

При перемещении компонент никак не влияет на положение окружающих частей страницы. Они так и останутся на своих местах, хотя относительно позиционированный блок может их перекрыть. Само по себе свойство используется редко. Обычно его применяют в сочетании со следующим вариантом.

Абсолютное позиционирование

Один из самых интересных и наиболее часто используемых вариантов. При использовании свойства Position со значением absolute положение компонента страницы будет высчитываться относительно окна браузера. Прочие элементы (не являющиеся абсолютно позиционированными) словно «забудут» о существовании «собрата» с Position : absolute и займут его место в потоке. Казалось бы, все точно так же, как в случае с Position : fixed, но есть и серьезные различия.

Во-первых, положением элемента можно свободно управлять - для этого используются свойства top/right/bottom/left. Например, если вы зададите значение bottom : 100px, блок «оттолкнется» от нижней част страницы на 100 пикселей. Во-вторых, при скроллинге «абсолютный» компонент останется на своем месте, вместо того, чтобы перемещаться со страницей.

Взаимодействие абсолютных блоков с родительскими элементами

Можно добиться еще более точного контроля над абсолютно позиционированным компонентом. Для этого нужно задать его родителю свойство Position : fixed, relative или absolute.

Рассмотрим пример. У вас есть div с классом relative-div, внутри которого размещается div с классом absolute-div. Задаем внутреннему блоку свойство Position : absolute. Тот сразу же «вылетает» из потока и оказывается где-то вверху, ведь теперь его расположение просчитывается относительно окна браузера. Теперь задаем блоку с классом relative-div свойство Position : relative и «блудный сын» возвращается на место. Почти. На самом деле, он оказывается в верхнем левом углу родительского элемента.

Почему так происходит? Дело в специфике свойства Position : absolute. По умолчанию его положение зависит от окна браузера, но если «родитель» тоже позиционирован как-то кроме static, позиция начинает зависеть от родительского элемента. Это очень удобно, потому что можно разместить компонент в любом месте, не просчитывая огромные цифры относительно окна браузера. Прием часто используется для размещения иконок, кнопок и других небольших элементов.

Одна из главных трудностей новичков состоит в том, чтобы центрировать элемент вертикально и горизонтально. Грамотно используя свойство Position , сделать это проще простого. CSS Position: absolute по центру устанавливается следующим образом. Допустим, у вас есть d iv с классом absolute-div, который находится в «диве» с классом relative-div. «Родитель» позиционирован относительно и его ширина равна ширине всей страницы. «Потомок» имеет ширину и высоту 400 px, абсолютное позиционирование и по умолчанию располагается в верхнем левом углу родительского элемента.

Все, что нужно сделать - это задать абсолютному компоненту top: 50 % и left: 50 %. Почти готово! Absolute-div сдвинулся с места и оказался почти в центре, но не совсем. Середины «родителя» касаются его края, а нам нужно, чтобы в центре блока оказался центр «потомка». Для этого нужно задать ему margin-left и margin-right со значениями -200 px. Тем самым мы сместим абсолютно позиционированный блок на половину его высоты и ширины. Все, он в центре!

Перекрывание компонентов

Проблемой может стать непростое, на первый взгляд, «наложение» позиционированных элементов на их «соседей». Например, компонент с Position : fixed будет перекрывать все, что расположено на странице. Исправить ситуацию можно с помощью свойства z-index, однако помните, что оно работает только для позиционированных элементов. Соответственно, если вы хотите размещать блок поверх фиксировано позиционированного элемента, этому блоку придется также задать позиционирование. Например, относительное.

Л учший способ освоить позиционирование - рассматривать примеры Position CSS, экспериментировать и пробовать что-то свое. Постарайтесь научиться использовать его в сочетании с функцией calc() - это даст возможность более гибко настраивать расположение. Однако помните, что это свойство не предназначено для выстраивания всей «сетки» страницы. С его помощью нужно перемещать относительно небольшие элементы, иначе можно слишком легко запутаться.