Основы CSS: позиционирование
Тут рассмотрим очень важную тему для верстки. Позиционирование HTML элементов.
Позиционирование элементов определяется правилом position это правило чем то похоже на display , оно тоже в корне меняет поведение, расположение элементов на экране. Это возможно одно и самых популярных css правил когда дело касается бесконечных лент, фиксированных заголовков и прочих элементов “залипающих” на экране.
static
Это позиционирование элементов по умолчанию. Оно подразумевает, что элементы идут друг за другом согласно блочной модели. “Блочная модель” это те самые правила расположения элементов которые были описаны ранее для свойства display . По скольку это позиционирование определенно по умолчанию, то зачастую указывать его не нужно. Но все же есть ситуации когда в цепочке правил нужно вернуть свойство position на в значение по умолчанию, поэтому в реальных проектах это значение встречается очень редко.
|
|
Если оно и встречается то скорее всего это признак “войны весов”, которая возникает при плохой методологии определения классов.
В случае статического позиционирования правила left top bottom right не оказывают никакого влияния на расположение элемента.
relative
Следующий шаг от нормального позиционирования это релятивное позиционирование. Для этого вида позиционирования браузер начинает использовать дополнительные ресурсы при отрисовке. Это важно знать если хочется делать сайты, верстка которых рисуется быстро. Но для чего тут браузеру нужны дополнительные ресурсы? Что делает это правило?
Это правило позволяет создать сдвиг относительно блочной позиции элемента не изменяя место занимаемое блоком в цепочке.
Это значит, что расположение блоков рядом с элементом который имеет релятивный сдвиг не меняется, но в тоже время сам элемент не на своем месте.
Что бы добится такого сдвига нужно использовать несколько правил.
|
|
Я специально привожу пример с правилом bottom, по скольку есть несколько важных моментов относительно пар правил top - bottom и left - right в случае релятивного позиционирования, которые не просто найти в интернете.
Во первых в обоих этих парах первое правило имеет приоритет. То есть на примере пары top bottom одновременно определить top и bottom то управлять сдвигом элемента будет только правило top, и совсем неважно что будет написано в правиле bottom
Во вторых нужно иметь в виду что положительный сдвиг для top эквивалентен отрицательному сдвигу по bottom, это правило справедливо для второй пары. Это значит что положительные значения сдвига в правиле top опускают элемент вниз, а для правила bottom поднимают элемент вверх, что и показано на примере.
absolute
Теперь же рассмотрим абсолютное позиционирование, его применяют, когда нужно расположить элемент относительно своего родителя . Здесь основная сложность в том что у элемента зачастую множество родителей и возникает вопрос относительно какого родителя будет позиционирован элемент?
Оказывается важную роль тут играет описанный выше релятивный способ позиционирования элемента. Родитель определяется по простому правилу, это элемент чье позиционирование не статично. Именно по этой причине позиционирования отличные от static требуют дополнительных ресурсов от браузера при отрисовки страниц.
А что если на странице нет ни одного элемента с позиционированием отличным от static, это же позиционирование по умолчанию для всех элементов? В этом случае элемент будет позиционирован относительно тела (body, html) HTML документа.
Так же в отличии он релятивного позиционирования при абсолютном элемент вырывается из основного потока и на его месте не остается ничего.
Так же важно заметить что в примере, что по горизонтали цифра 3 не изменила своего расположения она все так же находится за “2” это происходит потому, что для примера определены правила
|
|
По скольку в этих правилах не упоминается левое или правое позиционирование элемент продолжает занимать ту же позицию что и раньше. Это очень важная особенность, которая позволяет перемещать абсолютно позиционированные элементы так же как и релятивные с помощью отступов (margin), но всегда нужно помнить, что эти элементы все так же будут вырваны из блочной модели.
Внутри же абсолютно позиционированных элементов, можно продолжать размещать html теги как это происходит в релятивных и статических блоках.
На примере видно еще одну важную особенность абсолютно позиционированных блоков. Она заключается в том, что высота блока, даже с display: inline, теперь определяется значениями пары правил top - bottom.
Но эта особенность проявляется только в том случае если для блока явно не указана его высота в случае с парой top-bottom или ширина в случае с парой left-right.
Новый размер в этом случае определяется как разница позиций на которые указывают правила. Это значит, что высота элемента будет такой, что бы элемент удовлетворял обоим этим правилам, то есть его нижняя граница будет выполнять правило bottom а верхняя top.
Выше приведено общее правило, которое можно применить и для случаев если указано одно правило. Предположим у нас есть элемент содержимое которого может расширяться горизонтально. В случае если определить только правило left то блок будет расти слева направо
В примере определенно свойство left
|
|
Если же определить только свойство right то контент будет расти в другую сторону
Эти примеры наглядно иллюстрируют правило, что при выставлении одного или обоих правил в паре браузер изменяет размер контента таким образом, чтобы эти правила соблюдались.
В случае же когда есть определение высоты или ширины и заданы оба правила из пары, то элемент, как в случае релятивного позиционирования, позиционируется согласно приоритетам пар top и left.
Существует еще одна важная особенность абсолютно позиционируемых элементов. Заключается она в том, что точка отсчета задаваемых координат находится в одном из углов элемента, в зависимости от используемых правил. Имея знания об относительных размерах , порядке определения родителя абсолютно позиционированных элементах и правилах задания координат для них, не трудно догадаться как разместить правый нижний угол блока в середине экрана.
Для разметки вида
Нужно применить правила
Тем самым мы создадим квадрат с классом “b” со стороной размером 100px, нижний правый угол, которого будет находиться точно в центре другого дива с классом “a”. Блок с классом “a” будет занимать всю ширину и высоту документа.
Забегая немного вперед в css есть возможность изменить точку отсчета для выравнивания абсолютных блоков по средине экрана, с помощью свойства translate.
Существуют так же еще как минимум два способа позиционирования элементов они встречаются реже и возможно они будут рассмотрены в дальнейшем.
Так же в рамки этой статьи не помещается рассказ о еще одном очень важном для позиционирования свойстве z-index.
Буду рад комментариям идеям лайкам, всему тому что поможет сделать эту статью лучше. Поможет вам и другим людям, что прочтут их. Далее план описать оставшиеся методы позиционирования, рассказать немного о методологии наименования классов элементов.