position | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+4.0+1.0+1.0+1.0+1.0+

Краткая информация

Значение по умолчаниюstatic
НаследуетсяНет
ПрименяетсяКо всем элементам
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/visuren.html#propdef-position

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

Синтаксис

position: absolute | fixed | relative | static | inherit

Значения

absolute
Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.
fixed
По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Браузер Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента.
relative
Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
static
Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>position</title>
  <style>
   .layer1 {
    position: relative; /* Относительное позиционирование */
    background: #f0f0f0; /* Цвет фона */
    height: 200px; /* Высота блока */
   }
   .layer2 {
    position: absolute; /* Абсолютное позиционирование */
    bottom: 15px; /* Положение от нижнего края */
    right: 15px; /* Положение от правого края */
    line-height: 1px;
   }
  </style>
 </head>
 <body>
  <div>
   <div>
     <img src="images/girl.
 
 jpg" alt="Девочка" />
   </div>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства position

Объектная модель

[window.]document.getElementById(«elementID»).style.position

Браузеры

Браузер Internet Explorer 6 значение fixed не поддерживает. Internet Explorer до версии 8.0 не поддерживает значение inherit.

CSS по теме

  • position

Статьи по теме

  • 4 метода создания колонок одинаковой высоты
  • Выравнивание слоя по центру
  • Две колонки, навигация справа
  • Обзор HasLayout
  • Подвал страницы
  • Позиционирование элементов
  • Понятие потока
  • Поток документа
  • Разрезание и склейка изображений
  • Резиновый дизайн. Двухколонный макет
  • Резиновый трёхколоночный макет
  • Фиксированный дизайн. Наложение слоев
  • Фиксированный дизайн. Позиционирование
  • Фиксированный дизайн. Размещение трех колонок
  • Фиксированный трёхколоночный макет
  • Шапка страницы

Рецепты CSS

  • Как выделить строку с помощью блока с закруглениями?
  • Как добавить скругленные уголки у фотографии фиксированного размера?
  • Как заменить текст изображением?
  • Как зафиксировать слой, чтобы он оставался на одном месте при прокрутке страницы?
  • Как сделать рамку со скругленными уголками?

position

Давайте попробуем разобраться с таким свойством, которое называется «position» или «абсолютное позиционирование».

Давайте на страницу добавим какой-нибудь box, в который вложим еще один box.

<div>
  <div>
  </div>
</div>

.box{
  width:200px;
  height:200px;
  background: #444;
  margin: 20px;
  padding:1px;
}
.box_1{
  width:200px;
  height:200px;
  background: #aaa;
  margin: 20px;
}

Получаем вот такую картинку: 

Соответственно, что происходит? У каждого блока есть какой-то родитель, и этот блок будет позиционироваться относительно своего родителя. То есть в данном случае для первого бокса родитель – это «body» или сам сайт, то есть он позиционируется относительно него. Для «box_1» родителем будет «box», соответственно, он будет относительно него перемещаться на 20px. Но мы можем сделать так, чтобы «box_1» жил независимо от «box’а» и он мог находиться где хочет и как хочет. Это называется абсолютным позиционированием.

Для это мы задаём для «box_1» свойство «position: absolute».

.box_1{
  position: absolute;
  width:200px;
  height:200px;
  background: #aaa;
  margin: 20px;
  left: 10px;
  top: 20px;
}

И теперь, когда мы задали «position: absolute», у нас начинает действовать свойства «left», «top», «right», «bottom». Допустим, мы сделаем «left» 10px, «top» 20px, и блок встанет вот так:

Мы сделаем, давайте, «top» 5px, и блок встанет так:

Как видите, ему теперь без разницы есть «box», нет «box’а», потому что он позиционируется относительно «body». Мы можем даже поставить «bottom», и блок будет стоять снизу страницы. Поставим «right» ему, и тогда он будет справа. Если мы будем изменять размеры экрана, то этот бокс будет прижиматься к краю экрана и будет находится там, где бует находится угол нашего экрана.

Вот так работает «position: absolute».

В чём преимущество? В том, что мы теперь можем позиционировать как угодно наш блок по высоте, по ширине и т.д. Допустим, вы можете указать следующее: написать такую фишечку – «left: calc(50% — 100px)». Тогда блок встанет ровно по центру по ширине. Или написать точно такое же свойство для «top», тогда блок встанет ровно по высоте, то есть до этого он становился по ширине, а теперь по высоте.

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

Поехали разбираться в свойствах дальше, в нюансах. Теперь давайте сделаем «box» родителем для «box_1». Для этого для «box’а» мы задаём «position: relative». И происходит следующее:

То есть какая фишечка. Если элемент абсолютно спозиционирован и у него «position: absolute», то он будет позиционироваться относительно ближайшего родительского блока, у которого есть какое-то значение «position» — либо «absolute», либо «relative».

Чем отличаются «absolute» и «relative»? Тем, что «absolute» позиционируется абсолютно, а «relative» работает точно так же, как и работал, как обычный блок, но теперь он может являться родителем для абсолютно позиционированных элементов. То есть если «position: relative» не стоит, то этот блок позиционируется относительно «body».

Так же есть ещё один тип свойства «position». Давайте сделаем какой-то блок и зададим ему «position: fixed», зададим какой-то размер и спозиционируем сверху 50px и слева 100px. И поставим блок, который создаст на странице скролл.

Вот, мы скроллим страницу, как видите, скролл отрабатывается, но блок остаётся на месте, то есть «position: fixed» фиксирует наш блок по центру, то есть там, где укажем, и скролл на этот блок влиять не будет.

Это свойство вы можете использовать, допустим, для создания всплывающих каких-то окошек. То есть вы делаете вот так вот:

.block{
  position: fixed;
  width:100%;
  height:100%;
  left: 0px;
  top: 0px;
  background: #444;
}

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

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

Опубликовано

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

Значения позиционирования

Позиция CSS позволяет использовать до 5 различных значений. Но по существу обычно используются только 4 значения.

 раздел {
  положение: статичное; /* по умолчанию */
  положение: родственник;
  положение: абсолютное;
  положение: фиксированное;
  положение: наследовать; /* Не очень часто */
}

Статический

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

Родственник

Относительное положение позволяет вам делать две разные вещи

  1. Для смещения элементов в разных направлениях со значениями сверху , справа , снизу и слева .

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

Однако визуально может показаться, что он перемещен в другое место.

  1. Разрешить позиционирование дочернего элемента абсолютно по отношению к нему. (см. ниже)

Абсолют

Абсолютная позиция выводит документ из потока документов. Это означает, что он больше не занимает места, как статический и относительный.

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

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

Фиксированный

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

Другие атрибуты, доступные для позиционирования

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

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

  • z-index — Z-index управляет вертикальным порядком размещения элементов и принимает только пронумерованные целые числа. Чем выше целое число, тем больше вперед этот элемент. (Что-то вроде «переместить вперед/назад» в PowerPoint и Photoshop).

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

Спасибо за чтение, всего наилучшего и удачного кодирования!

Могу я прислать вам несколько статей, которые помогут вам стать профессионалом в CSS?

Изучите основы, которые помогут вам создать прочную основу, чтобы вы никогда не запутались.

Имя

Адрес электронной почты

Разница между абсолютной позицией css и относительной | от Leanne Z

3 минуты чтения

·

9 января 2017 г.

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

Прежде чем идти дальше, мы должны знать поведение по умолчанию position, когда мы не указываем никакого свойства position.

position: static

По умолчанию позиционирует элемент на основе его текущей позиции в потоке. Свойства сверху , справа , снизу , слева и z-index не применяются. — source MDN

position: относительный

Позиционировать элемент на основе его текущей позиции без изменения макета.

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

Позиция элемента на основе его ближайшая позиция предка.

Для начала создайте родительский контейнер с 4 ящиками рядом.

position: static

index.html 

 
 
 
Один
 
 
Два
 
 
Три
 
 
Четыре

style.css 

 .parent { 
 граница: 2 пикселя с черными точками; Дисплей 
: встроенный блок; 
 }.box { 
 display: inline-block; 
 фон: красный; 
 ширина: 100 пикселей; 
 высота: 100 пикселей; 
 }#two { 
 фон: зеленый; 
 }

Текущий код: JsBin

По умолчанию для позиции установлено статическое значение. Он позиционируется на основе макета в потоке.

Что происходит, когда мы хотим переместить GreenBox, но не хотим влиять на компоновку вокруг него?

position: relative

Здесь вступает в действие относительное положение.

No related posts.