Среда18 июля
Интернет

CSS - позиционирование блоков. Абсолютное и относительное позиционирование

10 июля 2018

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

Особенности блочных элементов

К блочным относятся теги, выделяющие большое количество текстовой информации: <div>, <form>,<p>, <h1>, <h2>, <ul>. Тег <div> достаточно часто используется в верстке современных сайтов для создания сеток и обозначает просто какой-то блок или контейнер. В него допустимо вкладывать и другие теги, что возможно не со всеми блочными элементами, поэтому <div> удобно использовать. Блоки обычно располагаются друг над другом и не вставляются в строчные элементы. К строчным элементам HTML относится текст, а CSS используется для его оформления.

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

Поток документа

Потоком называет порядок отображения элементов страницы, определяемый заданными в CSS свойствами. При этом по умолчанию блоки выстраиваются сверху вниз, а строчные теги при недостатке места переносятся на новую строку и располагаются сверху вниз и слева направо. Расположение элемента на странице зависит от его места в коде: чем он выше, значит, тем раньше он находится. Каждый из блочных элементов выглядит как прямоугольник, который отталкивает от себя соседние. Изменить такое поведение можно при помощи специальных свойств. Выравнивание в CSS определенных блоков по центру или по сторонам контейнера называется позиционированием.

css по центру

Видео по теме

Позиционирование элементов

Расположением блоков можно управлять при помощи абсолютного и относительного позиционирования. Позиционирование применяют, чтобы задать крупным разделам на странице определенное место, для создания сложных интерфейсов, всплывающих окон и декоративных элементов. Основное свойство, используемое для позиционирования блоков в CSS - position. У него есть четыре основных свойства:

  • relative;
  • absolute;
  • fixed;
  • static.

С их помощью можно переключать режимы расположения, задавая один из четырех параметров: top, right, bottom или left. Существует также свойство для упорядочивания слоев - z-index. Позиционирование со свойством static обычно не используется, так как оно обозначает расположение блоков по умолчанию. Поэтому применение каких-либо параметров никак на него не влияет. Для верстки используются остальные три свойства: relative, absolute, fixed.

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

Относительное позиционирование блоков в CSS, то есть свойство position: relative, означает, что элемент можно переместить и изменить его исходное расположение. Такой блок все равно остается в потоке. На самом деле смещается не он сам, а его копия. Задаются значения свойств для точного указания, насколько сместится блок в ту или иную сторону. Измеряются они чаще всего в пикселях. Но допустимо использовать и другие единицы.

выравнивание css

Использование свойств при относительном позиционировании

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

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

css выравнивание по вертикали

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

Абсолютное позиционирование блоков в CSS задается значением absolute свойства position. Элемент, который позиционирован абсолютно, выпадает из потока документа, а его место занимают соседние блоки. Ширина такого элемента растягивается в зависимости от его содержимого, и сместить его можно, задав определенные значения свойствам top, left, right, bottom. Абсолютное позиционирование блоков в CSS удобно использовать для заголовков. Но срабатывает position: absolute не только для блочных, но и для строчных элементов.

Выравнивание элементов по центру

Спозиционированный абсолютно строчный элемент будет вести себя точно так же, как и строчный. Поэтому при помощи позиционирования можно управлять в CSS и текстом. К нему можно применять некоторые новые свойства, например, изменять высоту и ширину. Для центровки и выравнивания по вертикали в CSS используется комбинирование нескольких свойств. Управляет выравниванием по вертикали свойство top. Если нужно разместить блок в CSS по центру, основной контейнер при этом должен быть относительно спозиционированным, а выравниваемый элемент - спозиционированным абсолютно. Контейнеру нужно задать свойство top: 50%, а для перемещения элемента на половину собственной высоты использовать свойство translate со значением “0, -50%”. Абсолютно спозиционированные элементы можно выделить в новый тип, так как к ним применяются свойства, недоступные для других видов позиционирования.

позиционирование блоков css

Позиционирование относительно левого верхнего угла браузера

Свойства left, top, right и bottom с абсолютно и относительно позиционированными элементами работают по-разному. Для относительных элементов эти свойства задают смещение относительно того места, где находится элемент. Абсолютно споциционированные занимают место относительно определенной системы координат, привязанной к размерам окна браузера. Начальными точками этой системы служат углы окна. При использовании свойства left отступ будет отсчитываться от левой стороны браузера, но полосы прокрутки при этом не возникнет. Свойство top при абсолютной позиционировании задает отступ от верхней стороны браузера до верхней части элемента, к которому оно применено. Комбинируя оба свойства, элемент можно перемещать относительно левого верхнего угла браузера.

меню css

Позиционирование относительно правого верхнего угла браузера

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

Система координат при абсолютном позиционировании

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

z-index свойство css

Точка отсчета для абсолютно позиционированного элемента

До того как элементу было задано абсолютное позиционирование, он находился на каком-то месте, которое называется неявной точкой отсчета. Если такому блоку не задать свойства, он не сдвинется с места. Сместить его можно, если задать свойство margin. Оно сработает аналогично свойствам позиционирования. Если не определить значение свойства left и всех остальных, тогда оно будет равно auto. Также при помощи auto можно возвращать элементы на свои прежние места.

z-index свойство

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

Еще одно значение - fixed. Свойство position закрепляет элемент на каком-то определенном месте. Фиксированное позиционирование часто используется для создания меню в CSS. Оно похоже на абсолютное, но фиксированный блок выпадает из потока. Даже при прокрутке страницы такой элемент останется на своем месте, поэтому его удобно использовать для создания меню в CSS. Точка отсчета при этом будет привязана к окну браузера. Если же спозиционированных блоков оказывается несколько, для их упорядочивания используется свойство z-index. С его помощью можно перекрывать относительные блоки абсолютными, если задать им соответствующий индекс, выраженный целым числом. Чем оно больше, тем выше будет находиться блок.

Источник: fb.ru
Комментарии
Ваше имя:
Комментарий:
Введите символы: *
captcha
Обновить

Похожие материалы
Дети И Телевизор Дом и семья
Дети И Телевизор

 Поток информации от телевизора  во много раз превышают способности органов восприятия детей. Известно, что большинство детей смотрят телевизор  по 4-6 часов в день.  Часто родители оставляют...

Абсолютный и относительный лимфоцитоз Здоровье
Абсолютный и относительный лимфоцитоз

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

Абсолютная и относительная ссылка в Excel. Как использовать? Компьютеры
Абсолютная и относительная ссылка в Excel. Как использовать?

Даже если вы недавно начали работать с программой Microsoft Excel, то, наверное, знаете, что одним из её преимуществ является удобная работа с формулами и таблицами. Поэтому сегодня мы с вами рассмотрим адресование в ...

Лучший крем для лица для сухой кожи: отзывы, рейтинг Красота
Лучший крем для лица для сухой кожи: отзывы, рейтинг

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

Нужна ли детская декоративная косметика? Красота
Нужна ли детская декоративная косметика?

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

Бедность - это что? Уровень бедности. Абсолютная и относительная бедность Новости и общество
Бедность - это что? Уровень бедности. Абсолютная и относительная бедность

Почему я бедный? Этот вопрос задают себе каждый день сотни тысяч людей на планете. Они стараются покупать минимум вещей, в которых нуждаются, но даже и на них часто не хватает мизерной зарплаты или пенсии. Бедность &n...

Абсолютная и относительная величина Образование
Абсолютная и относительная величина

В экономической науке статистические дисциплины находятся на приоритетных позициях. Это обусловлено различными причинами. В первую очередь в рамках общеэкономических специальностей статистические исследования выступаю...

Абсолютная и относительная погрешность Образование
Абсолютная и относительная погрешность

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

Абсолютная погрешность измерений. Как рассчитать абсолютную погрешность измерений? Определение абсолютной и относительной погрешности прямых измерений Образование
Абсолютная погрешность измерений. Как рассчитать абсолютную погрешность измерений? Определение абсолютной и относительной погрешности прямых измерений

Физические величины характеризуются понятием «точность погрешности». Есть высказывание, что путем проведения измерений можно прийти к познанию. Так удастся узнать, какова высота дома или длина улицы, как и...

Абсолютный и относительный показатели Образование
Абсолютный и относительный показатели

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