Положение элемента css: Позиционирование элементов | htmlbook.ru

position — Учебник CSS — Schoolsw3.com

❮ Назад Далее ❯

Свойство position определяет тип метода позиционирования и используется для элемента, имеет значения (static, relative, fixed или absolute).

Свойство position

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

Есть четыре различных значения позиции:

• static статическая позиция
• relative относительная позиция
• fixed фиксированная позиция
• absolute абсолютная позиция

Затем элементы устанавливаются с помощью свойств top, right, bottom и left. Однако, это свойство не будет работать, если свойство position установлено одно. position также работает по-разному, в зависимости от значения позиции.

Позиция статистическая

Элемент HTML position: static;

Статические позиционированные элементы не влияют на свойства top, right, bottom и left.

Элемент с position: static; не позиционируется по-особенному; он всегда располагается в соответствии с нормальным потоком страницы:

Элемент <div> имеет position: static;

Пример CSS, который используется:

Пример

div.static {
   position: static;
   border: 3px solid #73AD21;
}

Попробуйте сами »

Позиция относительная

Элемент с position: relative; позиционируется относительно своего нормального положения.

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

Элемент <div> имеет position: relative;

Пример CSS, который используется:

Пример

div. relative {
   position: relative;
   left: 30px;
   border: 3px solid #73AD21;
}

Попробуйте сами »

Позиция фиксированная

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

Обратите внимание на фиксированный элемент в нижнем правом углу страницы. Пример CSS, который используется:

Пример

div.fixed {
   position: fixed;
   bottom: 0;
   right: 0;
   width: 300px;
   border: 3px solid #73AD21;
}

Попробуйте сами »

Элемент <div> имеет position: fixed;

Позиция абсолютная

Элемент с position: absolute; позиционируется абсолютно ближайшего позиционированного предка (позиционируется абсолютно окна просмотра, вместо фиксированного).

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

Примечание: Элемент «расположенный» один, положение которого ничего не значит, кроме static.

Элемент <div> имент position: relative;

Элемент <div> имент position: absolute;

Пример CSS, который используется:

Пример

div.relative {
   position: relative;
   width: 400px;
   height: 200px;
   border: 3px solid #73AD21;
}

div.absolute {
   position: absolute;
   top: 80px;
   right: 0;
   width: 200px;
   height: 100px;
   border: 3px solid #73AD21;
}

Попробуйте сами »

Перекрывающий элемент

Когда элементы расположены в окне просмотра дисплея, они могут перекрывать друг друга.

Свойство z-index определяет порядок элемента в стеке (какой элемент должен быть помещен в передней части или за элементом)

Элемент может иметь положительное или отрицательное расположение стеки:

Так как изображение имеет z-index:1, оно будет помещено за текстом.

Пример

img {
   position: absolute;
   left: 0px;
   top: 0px;
   z-index: -1;
}

Попробуйте сами »

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

Примечание: Если два элемента расположенны без перекрытия z-index, указанный элемент расположенный последним в коде HTML отображается вверху.

Расположение текста в изображении

Как разместить текст поверх изображения:

Пример

Cнизу Слева

Сверху Слева

Сверху Справа

Снизу Справа

По Центру

Попробуйте сами:

Сверху Слева »Сверху Справа »Cнизу Слева »Снизу Справа »По Центру »

Еще примеры

Установить форму элемента
Этот пример показывает, как установить форму элемента. Элемент закрепляется в форму и отображается.

Проверьте себя с помощью упражнений!

Упражнение 1 »  Упражнение 2 »  Упражнение 3 »  Упражнение 4 »  Упражнение 5 »

Все CSS свойства позиции

❮ Назад Далее ❯

16.

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

static

Это значение, применяемое по умолчанию. Оно указывает, что элемент позиционируется статически в соответствии с нормальным порядком вывода содержимого документа (для большинства западных языков — слева направо и сверху вниз). Статически позиционированные элементы не могут позиционироваться с помощью свойств top, left и других. Для позиционирования элемента документа с применением приемов CSS сначала нужно установить его свойство position равным одному из трех других значений.

absolute

fixed

Это значение позволяет зафиксировать положение элемента относительно окна броузера. Элементы с фиксированным позиционированием не прокручиваются с остальной частью документа. Как и абсолютно позиционированные, фиксировано позиционированные элементы не зависят от всех остальных элементов и не являются частью потока вывода документа. Фиксированное позиционирование поддерживается большинством современных броузеров, исключая ІЕ6.

relative

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

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

<div>

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

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

position: absolute; right: 0рх; bottom: 0рх;

Чтобы верхний край элемента располагался в 10 пикселах от верхнего края окна, а правый — в 10 пикселах от правого края окна и при этом не прокручивался вместе с документом, можно использовать такие стили:

position: fixed; right: 10рх; top: 10рх;

Помимо позиций элементов CSS позволяет указывать их размеры. Чаще всего это делается путем задания значений свойств стиля width и height. Например, следующая разметка HTML создаст абсолютно позиционированный элемент без содержимого. Его свойствам width, height и background-color присвоены такие значения, что он будет отображаться в виде маленького синего квадрата:

<div>

</div>

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

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

Стандарт CSS требует, чтобы в значениях свойств, определяющих позицию и размер, указывались единицы измерения. В предыдущих примерах значения свойств позиционирования и размера задавались с суффиксом «рх», означающим «pixels» (пикселы). Можно также использовать другие единицы измерения: дюймы («in»), сантиметры («сm»), пункты («pt») и «еm» (размер высоты строки текущего шрифта).

Помимо единиц измерения, представленных выше, CSS позволяет задавать положение и размер элемента в процентах от размера элемента-контейнера. Например, следующая разметка HTML создаст пустой элемент с черной рамкой, имеющий ширину и высоту в половину элемента-контейнера (или окна броузера) и расположенный в этом элементе по центру:

<div>

</div>

16.2.1.1. Третье измерение: z-index

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

Обратите внимание, что порядок наложения определяется свойством z-index только для смежных элементов (т. е. для дочерних элементов одного контейнера). Если перекрываются два несмежных элемента, то на основе индивидуальных значений свойств z-index нельзя указать, какой из них должен находиться сверху. Вместо этого надо задать атрибут z-index для двух смежных контейнеров перекрывающихся элементов.

Способ размещения непозиционируемых элементов (элементов со значением по умолчанию режима позиционирования position:static) исключает возможность перекрытия, поэтому к ним свойство z-index не применяется. Тем не менее они получают значение z-index, по умолчанию равное нулю, т.е. позиционируемые элементы с положительным значением z-index отображаются поверх обычного потока вывода документа, а позиционируемые элементы с отрицательным значением z-index оказываются ниже обычного потока вывода документа.

16.2.1.2. Пример позиционирования средствами CSS: текст с тенью

Спецификация CSS3 включает свойство text-shadow, позволяющее добиться эффекта отбрасывания тени текстовыми элементами. Данное свойство поддерживается многими текущими броузерами, однако добиться эффекта тени можно и с помощью CSS-свойств позиционирования, для чего достаточно продублировать, сместив, выводимый текст:

<!— Свойство text-shadow производит тень автоматически —>

<span>С тенью</span>

<! —

Ниже показано, как добиться похожего эффекта с помощью механизма позиционирования.

—>

<span>

  С тенью <!— Это основной текст, отбрасывающий тень. —>

  <span>

    С тенью <!— Это тень —>

  </span>

</span>

Текст, отбрасывающий тень, заключается в относительно позиционируемый элемент <span>. Для него не определяются свойства, задающие позицию, поэтому текст отображается в обычной позиции в потоке. Тень заключается в абсолютно позиционируемый элемент <span>, помещенный в относительно позиционируемый элемент <span> (и поэтому позиционируется относительно него). Свойство z-index обеспечивает отображение тени под текстом.

Полное руководство по позициям CSS: Расположение элементов в CSS

Главная/Блог/Полное руководство по позициям CSS: Расположение элементов в CSS

16 декабря 2020 г. — 10 минут чтения быть несколькими элементами на нашей странице, каждый со своим положением, использованием и дизайном. Важно узнать, как мы можем расположить эти элементы и контролировать их расположение.

Свойство position в CSS определяет как элемент расположен в документе . Он определяет тип метода позиционирования для каждого элемента.

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

Мы изучим:

• Положение CSS и вспомогательные свойства
• Позиция: статическая
• Должность: родственник
• Позиция: абсолютная
• Позиция: фиксированная
• Позиция: липкая
• Z-индекс
• Что узнать дальше

Идеальное место, чтобы начать свое путешествие в мир передовых технологий. Этот путь учит всему, что вам нужно знать о HTML, CSS и JavaScript.

Станьте фронтенд-разработчиком

Позиция CSS и вспомогательные свойства

С помощью CSS мы определяем макет и дизайн веб-страницы. CSS позиция — это то, как мы позиционируем каждый элемент в документе. Это свойство представляет собой одно ключевое слово, и мы присваиваем ему значение, чтобы установить конкретную позицию элемента.

Существует пять основных значений для свойства position. Мы подробно определим их ниже:

• статический
• родственник
• абсолютный
• фиксированный
• липкий

Сначала мы устанавливаем свойство position. Затем координаты элемента позиционируются с помощью вспомогательные свойства :

• верх
• снизу
• слева
• справа
• Z-индекс

Прежде чем мы углубимся в это, давайте посмотрим, что произойдет, если мы не назначим элементу свойство position.

Веб-страница без позиции CSS или вспомогательных свойств

В приведенном выше коде мы видим, что у нас есть 3 разных изображения. Но в файле CSS мы не присвоили свойства положения ни одному элементу.

Изображения скорректированы по вертикальной линии , что является значением по умолчанию, когда свойство положения не назначено. Также есть небольшой запас сверху и слева. Это поле в 10 пикселей по умолчанию, предоставляемое HTML-элементом.

Как мы видим, не будет промежутков между элементами, если мы не обеспечим это извне. В файле CSS мы указали значение margin-bottom в 10 пикселей, что помогает нам сохранить зазор между изображениями.

Итак, зачем нам свойство position?

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

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

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

Position: static

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

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

Давайте лучше разберемся на примере.

Использование position:static

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

Позиция: относительная

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

Элементы в любом документе располагаются в «нормальном положении», если мы не предоставляем ему какое-либо свойство положения. Используя position:relative , мы можем расположить элемент в соответствии с его обычным положением.

Важно! В отличие от static , мы можем перемещать элемент, используя вспомогательные свойства.

Давайте рассмотрим пример, чтобы лучше понять это.

Использование положения: относительно

В выходных данных мы ясно видим, что элементы перемещаются относительно их исходных положений на основе значений top , right , bottom и left .

Давайте посмотрим на другой пример. Здесь мы расположим элементы на горизонтальной линии, используя position:relative .

Использование position:relative для организации по горизонтальной линии

Здесь мы настраиваем все три изображения по горизонтальной линии. Для Astro_Girl , мы устанавливаем top:0px и left:0px , чтобы он оставался в исходном положении.

Для Astro_Cartoon необходимо установить top:-200px , чтобы вернуть его на первую строку. И чтобы отобразить его по горизонтальной линии, мы перемещаем его на 200px слева, используя left:200px . Но чтобы сохранить пространство 10px , мы переместим его на 210px слева.

Для Astro_Boy мы устанавливаем top:-400px , чтобы вернуть его на первую строку. Мы используем ту же логику, чтобы удерживать его на горизонтальной линии. Чтобы сохранить пространство 10px , как и раньше, мы перемещаем его на 420px слева.

Позиция: абсолютная

Элемент, использующий позицию : абсолютная , позиционируется относительно ближайшего предка. Другими словами, элемент с position:absolute позиционируется относительно своего родительского элемента .

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

Примечание: Если мы не указываем свойства помощника, он автоматически позиционируется в начальной точке (верхний левый угол) своего родительского элемента.

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

Давайте лучше поймем это на следующих примерах.

Использование position:absolute

В выводе мы видим только изображение Astro_Girl , так как этот элемент имеет свойство position:absolute . Он будет выброшен из нормального документооборота. Все остальные элементы будут вести себя так, как будто элемент не существует.

Astro_Boy использует position:static , поэтому он устанавливается в соответствии с обычным потоком документов. С Astro_Girl не является частью документооборота, наша веб-страница считает Astro_Boy первым элементом.

Он установлен в обычное положение для первого элемента (верхний левый угол), но элемент Astro_Girl скроет его под собой, поэтому мы можем видеть только этот элемент.

Давайте узнаем, как открыть другой элемент с помощью вспомогательных свойств CSS.

Использование position:absolute со вспомогательными свойствами

Выше мы установили position:absolute вместо Astro_Girl как раньше. Но на этот раз мы устанавливаем вспомогательные свойства для Astro_Boy , используя left:400px . Это означает, что он будет отображаться на расстоянии 400 пикселей от верхнего левого угла.

На данный момент мы видим, что поле по умолчанию 10px , но мы можем удалить его, если захотим. В приведенном ниже примере мы удалили верхнее и левое поле 10px , установив top:-10px и left:-10px 9.0012 .

Примечание: Поскольку у наших элементов нет родительского элемента, он упорядочивается в соответствии с HTML.

Использование position:absolute без полей

Давайте рассмотрим еще один пример position: absolute , чтобы лучше понять его, на этот раз с использованием родительских элементов .

Использование position:absolute с родительским элементом

В этом примере мы используем родительский элемент. Если есть родительский элемент, все его дочерние элементы будут размещены относительно него. Здесь мы использовали простой пример оранжевого блока в качестве родительского элемента.

Для Astro_Girl мы устанавливаем position:absolute вместе со свойствами top:50px и left:100px . Он размещается относительно родительского элемента. То же самое и с Astro_Cartoon и Astro_Boy .

 . элемент {
  положение: родственник;
  верх: 10 пикселей;
}
 

 

  
родительский
  <дел>
     
ребенок
     <дел>
       
элемент