В языке HTML все элементы можно разделить на блочные и строчные. Блочные элементы обычно представляются как прямоугольные области с некоторым количеством информации. С их помощью выстраивается сетка страницы. Такие элементы занимают все доступное им пространство по ширине, а до и после них обычно присутствует перенос строки. Блокам можно задавать отступы, горизонтальные и вертикальные размеры.
Особенности блочных элементов
К блочным относятся теги, выделяющие большое количество текстовой информации: <div>, <form>,<p>, <h1>, <h2>, <ul>. Тег <div> достаточно часто используется в верстке современных сайтов для создания сеток и обозначает просто какой-то блок или контейнер. В него допустимо вкладывать и другие теги, что возможно не со всеми блочными элементами, поэтому <div> удобно использовать. Блоки обычно располагаются друг над другом и не вставляются в строчные элементы. К строчным элементам HTML относится текст, а CSS используется для его оформления.
При заданной ширине контента общая ширина блока складывается из значений правого и левого отступа, полей, границ и ширины. При заданной высоте - из верхнего и нижнего отступа, полей, границ и высоты. Текст в блочных элементах выравнивается по умолчанию по левому краю. Если в одном из них находятся строчные элементы вместе с блочными, то вокруг строчных создается анонимный блок. Для него будет применяется стиль по умолчанию. Также он будет наследовать заданный стиль, присвоенный его родителю.
Поток документа
Потоком называет порядок отображения элементов страницы, определяемый заданными в CSS свойствами. При этом по умолчанию блоки выстраиваются сверху вниз, а строчные теги при недостатке места переносятся на новую строку и располагаются сверху вниз и слева направо. Расположение элемента на странице зависит от его места в коде: чем он выше, значит, тем раньше он находится. Каждый из блочных элементов выглядит как прямоугольник, который отталкивает от себя соседние. Изменить такое поведение можно при помощи специальных свойств. Выравнивание в CSS определенных блоков по центру или по сторонам контейнера называется позиционированием.
Позиционирование элементов
Расположением блоков можно управлять при помощи абсолютного и относительного позиционирования. Позиционирование применяют, чтобы задать крупным разделам на странице определенное место, для создания сложных интерфейсов, всплывающих окон и декоративных элементов. Основное свойство, используемое для позиционирования блоков в CSS - position. У него есть четыре основных свойства:
- relative;
- absolute;
- fixed;
- static.
С их помощью можно переключать режимы расположения, задавая один из четырех параметров: top, right, bottom или left. Существует также свойство для упорядочивания слоев - z-index. Позиционирование со свойством static обычно не используется, так как оно обозначает расположение блоков по умолчанию. Поэтому применение каких-либо параметров никак на него не влияет. Для верстки используются остальные три свойства: relative, absolute, fixed.
Относительное позиционирование
Относительное позиционирование блоков в CSS, то есть свойство position: relative, означает, что элемент можно переместить и изменить его исходное расположение. Такой блок все равно остается в потоке. На самом деле смещается не он сам, а его копия. Задаются значения свойств для точного указания, насколько сместится блок в ту или иную сторону. Измеряются они чаще всего в пикселях. Но допустимо использовать и другие единицы.
Использование свойств при относительном позиционировании
Свойство top смещает копию определенного блока вверх или вниз на то количество пикселей, которое указано в свойстве. При его использовании элементы, расположенные ниже или выше, остаются на своих местах, так как на самом деле и смещаемый блок тоже никуда не сдвигается.
Свойство bottom смещает блок в противоположном свойству top направлении. Положительное значение помогает сместить его вверх, а отрицательное - вниз. Свойства right и left сдвигают элемент вправо и влево соответственно. Комбинируя их все, можно задавать блоку точное расположение на странице, смещая его по вертикальной и горизонтальной оси координат. Если увеличить отступы, они будут рассчитываться не от края самого блока, а от его смещенной в сторону копии.
Абсолютное позиционирование
Абсолютное позиционирование блоков в CSS задается значением absolute свойства position. Элемент, который позиционирован абсолютно, выпадает из потока документа, а его место занимают соседние блоки. Ширина такого элемента растягивается в зависимости от его содержимого, и сместить его можно, задав определенные значения свойствам top, left, right, bottom. Абсолютное позиционирование блоков в CSS удобно использовать для заголовков. Но срабатывает position: absolute не только для блочных, но и для строчных элементов.
Выравнивание элементов по центру
Спозиционированный абсолютно строчный элемент будет вести себя точно так же, как и строчный. Поэтому при помощи позиционирования можно управлять в CSS и текстом. К нему можно применять некоторые новые свойства, например, изменять высоту и ширину. Для центровки и выравнивания по вертикали в CSS используется комбинирование нескольких свойств. Управляет выравниванием по вертикали свойство top. Если нужно разместить блок в CSS по центру, основной контейнер при этом должен быть относительно спозиционированным, а выравниваемый элемент - спозиционированным абсолютно. Контейнеру нужно задать свойство top: 50%, а для перемещения элемента на половину собственной высоты использовать свойство translate со значением “0, -50%”. Абсолютно спозиционированные элементы можно выделить в новый тип, так как к ним применяются свойства, недоступные для других видов позиционирования.
Позиционирование относительно левого верхнего угла браузера
Свойства left, top, right и bottom с абсолютно и относительно позиционированными элементами работают по-разному. Для относительных элементов эти свойства задают смещение относительно того места, где находится элемент. Абсолютно споциционированные занимают место относительно определенной системы координат, привязанной к размерам окна браузера. Начальными точками этой системы служат углы окна. При использовании свойства left отступ будет отсчитываться от левой стороны браузера, но полосы прокрутки при этом не возникнет. Свойство top при абсолютной позиционировании задает отступ от верхней стороны браузера до верхней части элемента, к которому оно применено. Комбинируя оба свойства, элемент можно перемещать относительно левого верхнего угла браузера.
Позиционирование относительно правого верхнего угла браузера
Аналогичным образом при помощи свойств right и top можно прижимать элемент к правой части окна браузера и менять его расположение по вертикали, смещая в правый верхний угол. При отрицательном значении свойства right блок сместится за границу окна. После этого должна появиться полоса прокрутки. Для смещения элемента вниз используется свойство bottom. Оно задает отступ от нижнего края окна браузера до нижней части блока. При отрицательном его значении также появляется полоса прокрутки, так как элемент смещается за нижнюю границу окна браузера.
Система координат при абсолютном позиционировании
По умолчанию все элементы, которым задано абсолютное позиционирование, привязаны к одной системе координат - окну браузера. Но ее можно изменить, если задать какому-либо родительскому элементу относительное позиционирование. Тогда дочерний блок будет менять свое местоположение в зависимости от родительского. Если же среди родительских элементов будет несколько с относительным позиционированием, тогда отсчет ведется от ближайшего из них. При этом позиционирование по умолчанию будет от того, что задано в теге body.
Точка отсчета для абсолютно позиционированного элемента
До того как элементу было задано абсолютное позиционирование, он находился на каком-то месте, которое называется неявной точкой отсчета. Если такому блоку не задать свойства, он не сдвинется с места. Сместить его можно, если задать свойство margin. Оно сработает аналогично свойствам позиционирования. Если не определить значение свойства left и всех остальных, тогда оно будет равно auto. Также при помощи auto можно возвращать элементы на свои прежние места.
Фиксированное позиционирование
Еще одно значение - fixed. Свойство position закрепляет элемент на каком-то определенном месте. Фиксированное позиционирование часто используется для создания меню в CSS. Оно похоже на абсолютное, но фиксированный блок выпадает из потока. Даже при прокрутке страницы такой элемент останется на своем месте, поэтому его удобно использовать для создания меню в CSS. Точка отсчета при этом будет привязана к окну браузера. Если же спозиционированных блоков оказывается несколько, для их упорядочивания используется свойство z-index. С его помощью можно перекрывать относительные блоки абсолютными, если задать им соответствующий индекс, выраженный целым числом. Чем оно больше, тем выше будет находиться блок.
