Блочная верстка в HTML5

Свойство position

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

position: static

Статическое позиционирование производится по умолчанию, в том случае, если свойство position не указано.

Его можно также явно указать через CSS-свойство:

Такая запись встречается редко и используется для переопределения других значений position .

Здесь и далее, для примеров мы будем использовать следующий документ:

 
Без позиционирования ("position: static"). 
Заголовок
 
А тут - всякий разный текст. 
. В две строки!
 

В этом документе сейчас все элементы отпозиционированы статически, то есть никак.

Элемент с position: static ещё называют не позиционированным.

position: relative

Относительное позиционирование сдвигает элемент относительно его обычного положения.

Для того, чтобы применить относительное позиционирование, необходимо указать элементу CSS-свойство position: relative и координаты left/right/top/bottom .

Этот стиль сдвинет элемент на 10 пикселей относительно обычной позиции по вертикали:

position: relative; top: 10px;

 h2 
Заголовок сдвинут на 10px вниз. 
Заголовок
 
А тут - всякий разный текст. 
. В две строки!
 

Координаты

Для сдвига можно использовать координаты:

• top – сдвиг от «обычной» верхней границы
• bottom – сдвиг от нижней границы
• left – сдвиг слева
• right – сдвиг справа

Не будут работать одновременно указанные top и bottom , left и right . Нужно использовать только одну границу из каждой пары.

Возможны отрицательные координаты и координаты, использующие другие единицы измерения. Например, left: 10% сдвинет элемент на 10% его ширины вправо, а left: -10% – влево. При этом часть элемента может оказаться за границей окна:

 h2 
Заголовок сдвинут на 10% влево. 
Заголовок
 
А тут - всякий разный текст. 
. В две строки!
 

Свойства left/top не будут работать для position:static . Если их всё же поставить, браузер их проигнорирует. Эти свойства предназначены для работы только с позиционированными элементами.

position: absolute

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

1. Элемент исчезает с того места, где он должен быть и позиционируется заново. Остальные элементы, располагаются так, как будто этого элемента никогда не было.
2. Координаты top/bottom/left/right для нового местоположения отсчитываются от ближайшего позиционированного родителя, т.е. родителя с позиционированием, отличным от static . Если такого родителя нет – то относительно документа.

• Ширина элемента с position: absolute устанавливается по содержимому. Детали алгоритма вычисления ширины описаны в стандарте.
• Элемент получает display:block , который перекрывает почти все возможные display (см. Relationships between „display“, „position“, and „float“).

Например, отпозиционируем заголовок в правом-верхнем углу документа:

 h2 
Заголовок в правом-верхнем углу документа. 
Заголовок
 
А тут - всякий разный текст. 
. В две строки!
 

Важное отличие от relative : так как элемент удаляется со своего обычного места, то элементы под ним сдвигаются, занимая освободившееся пространство. Это видно в примере выше: строки идут одна за другой.

Так как при position:absolute размер блока устанавливается по содержимому, то широкий Заголовок «съёжился» до прямоугольника в углу.

Иногда бывает нужно поменять элементу position на absolute , но так, чтобы элементы вокруг не сдвигались. Как правило, это делают, меняя соседей – добавляют margin/padding или вставляют в документ пустой элемент с такими же размерами.

В абсолютно позиционированном элементе можно одновременно задавать противоположные границы.

Браузер растянет такой элемент до границ.

Источник

Html top left width height

CSS предоставляет возможности по позиционированию элемента, то есть мы можем поместить элемент в определенное место на странице

Основным свойством, которые управляют позиционированием в CSS, является свойство position . Это свойство может принимать одно из следующих значений:

• static : стандартное позиционирование элемента, значение по умолчанию
• absolute : элемент позиционируется относительно границ элемента-контейнера, если у того свойство position не равно static
• relative : элемент позиционируется относительно его позиции по умолчанию. Как правило, основная цель относительного позиционирования заключается не в том, чтобы переместить элемент, а в том, чтобы установить новую точку привязки для абсолютного позиционированния вложенных в него элементов
• fixed : элемент позиционируется относительно окна бразуера, это позволяет создать фиксированные элементы, которые не меняют положения при прокрутке

Не следует одновременно применять к элементу свойство float и любой тип позиционирования, кроме static (то есть тип по умолчанию).

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

Область просмотра браузера имеет верхний, нижний, правый и левый края. Для каждого из этих четырех краев есть соответствующее свойство CSS: left (отступ от края слева), right (отступ от края справа), top (отступ от края контейнера сверху) и bottom (отступ снизу). Значения этих свойств указываются в пикселях, em или процентах. Необязательно задавать значения для всех четырех сторон. Как правило, устанавливают только два значения — отступ от верхнего края top и отступ от левого края left.

     .header 
HELLO WORLD
   

Здесь элемент div с абсолютным позиционированием будет находиться на 100 пикселей слева от границы области просмотра и на 50 снизу.

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

Если элемент с абсоютным позиционированием располагается в другом контейнере, у которого в свою очередь значение свойства position не равно static , то элемент позиционируется относительно границ контейнера:

     .outer < position: absolute; left: 80px; top: 40px; width: 430px; height: 100px; border: 1px solid #ccc; >.inner  

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

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

     .outer < position: relative; left: 80px; top: 40px; width: 300px; height: 100px; border: 1px solid #ccc; >.inner  

Свойство z-index

По умолчанию при совпадении у двух элементов границ, поверх другого отображается тот элемент, который определен в разметке html последним. Однако свойство z-index позволяет изменить порядок следования элементов при их наложении. В качестве значения свойство принимает число. Элементы с большим значением этого свойства будут отображаться поверх элементов с меньшим значением z-index.

     body < margin:0; padding:0; >.content < position: relative; top: 15px; left: 20px; width: 250px; height: 180px; background-color: #eee; border: 1px solid #ccc; >.redBlock < position: absolute; top: 20px; left:50px; width: 80px; height: 80px; background-color: red; >.blueBlock  

Теперь добавим к стилю блока redBlock новое правило:

Здесь z-index равен 100. Но это необязательно должно быть число 100. Так как у второго блока z-index не определен и фактически равен нулю, то для redBlock мы можем установить у свойства z-index любое значение больше нуля.

И теперь первый блок будет накладываться на второй, а не наоборот, как было в начале:

Источник

С мещение элементов в CSS

Эти свойства определяют смещение между внешним краем позиционированного элемента и краем его родительского элемента: Top — от верхнего края, Bottom — от нижнего, Left и Right — от левого и правого. Если родитель у элемента отсутствует, то началом отсчёта служат границы окошка браузеров.

Область применения *: позиционированные элементы, для которых значение свойства Position отлично от static.

.element < position: absolute; top: 50px; right: 50px; height: 70px; width: 70px; border: 2px solid #000;>
.element < position: absolute; top: 50%; right: 50%; height: 70px; width: 70px; border: 2px solid #000;>
— в первом примере смещение задано в пикселах;
— во втором — в процентах, где высота элемента ровно в два раза меньше высоты родителя, выступ произошёл из-за ширины рамки, а в принципе можно чётко поместить элемент в один из углов родительского блока:

Смещение элементов при абсолютном и относительном
позиционировании

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

.element < position: absolute; bottom: 30px; left: 30px; height: 70px; width: 70px; border: 2px solid #000;>
— для элемента задано абсолютное позиционирование; в примере на второй картинке — всё то же самое, только позиционирование относительное, т.е. свойство Position со значением relative:

Используются принятые в CSS единицы, отрицательные значения смещают элемент наружу. Для относительно позиционированных элементов значение свойства Left всегда равно значению свойства Right, но с противоположным знаком. Для элементов static значение всегда будет auto, т.е. ноль.

• % — относительно высоты или ширины родительского элемента.
• auto — если Bottom и Top имеют значение auto — то это для обоих будет 0; если одно из них auto — то оно принимает значение другого, но с противоположным знаком; если значение Top задано — то значение Bottom будет auto, т.е. ноль. Значения тестировались в браузере Сhrome.
• inherit — наследование от родительского элемента.

Источник

Html top left width height

CSS свойство top частично определяет вертикальную позицию позиционируемого элемента. Оно не влияет на непозиционируемые элементы (т.е. top не применится, если задано position: static ).

Интерактивный пример

Эффект свойства top зависит от того, как позиционируется элемент (то есть от значения свойства position ):

• Когда задано position: absolute или fixed — значение свойства top устанавливается как расстояние между верхней гранью элемента и верхней гранью родительского контейнера.
• Когда задано position: relative — значение свойство top устанавливается как расстояние, на которое смещается верхний край элемента от нормальной позиции.
• Когда задано position: sticky — свойство top работает так, как при position: relative во время нахождения элемента внутри области просмотра, и как position: fixed вне области просмотра.
• Когда задано position: static — свойство top не имеет никакого эффекта.

Когда заданы оба свойства top и bottom , а свойство position установлено как absolute или fixed , то оба свойства top и bottom учитываются. Во всех остальных ситуациях, если height как-либо ограничена или position установлено как relative , то свойство top будет учтено, а bottom — проигнорировано.

Синтаксис

/* Значения величин */ top: 3px; top: 2.4em; /* Процентные значения от высоты родительского блока */ top: 10%; /* Ключевое слово */ top: auto; /* Глобальные значения */ top: inherit; top: initial; top: unset; 

Значения

Отрицательная, нулевая или положительная величина, которая представляет:

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

Процент от высоты родительского блока.

Это ключевое слово, которое означает:

• для абсолютно спозиционированных элементов — позиция элемента опирается на свойство bottom , пока height: auto обрабатывается как высота в зависимости от содержимого; если так же и bottom: auto , то элемент располагается так же, как при статическом позиционировании.
• для относительно спозиционированных элементов — расстояние элемента от его обычной позиции основано на свойстве bottom ; если значение bottom также auto , элемент вообще не перемещается по вертикали.

Это ключевое слово указывает, что значение будет соответствовать вычисленному значению родительского блока (необязательно непосредственного родителя). Вычисляемое значение обрабатывается так же, как , или ключевое слово auto .

Формальный синтаксис

Пример

/* Для body могут быть использованы единицы px, также и для div */ body width: 100%; height: 100%; > /* div теперь может использовать значения в процентах (body ширина и высота установлены) */ div  position: absolute; left: 15%; top: 30%; bottom: 30%; width: 70%; height: 40%; text-align: left; border: 3px rgb(0,0,0) solid; > 

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> head> meta http-equiv="Content-Type" content="application/xhtml+xml" /> title>Mozilla.org height top left width percentage CSStitle> style type="text/css"> /* Для body могут быть использованы единицы px, также и для div */ body  width: 100%; height: 100%; > /* div теперь может использовать значения в процентах (body ширина и высота установлены) */ div  position: absolute; left: 15%; top: 30%; bottom: 30%; width: 70%; height: 40%; text-align: left; border: 3px rgb(0,0,0) solid; > style> head> body> center> div> . Some content. div> center> body> html> 

Спецификации

Совместимость с браузерами

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

Your blueprint for a better internet.

Источник