Top bottom right left: top / bottom / left / right | CSS-Tricks

Leave a Comment / Разное / By /

top, left, right, bottom — CSS — Дока

  1. Кратко
  2. Пример
  3. Как понять
  4. Как пишется

Кратко

Скопировано

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

Пример

Скопировано

div {  position: fixed;  top: 10px;}
          div {
  position: fixed;
  top: 10px;
}

Как понять

Скопировано

Если у элемента задано свойство position, то ему можно указать точное положение на странице при помощи top, left, right и bottom.

Как пишется

Скопировано

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

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

Например, при таком позиционировании элемент будет сдвинут на 10 px вниз и на 5 px влево:

div {  position: absolute;  top: 10px;  left: -5px;}
          div {
  position: absolute;
  top: 10px;
  left: -5px;
}

А в данном случае наоборот, сместится на 10 px вверх и на 5 px вправо:

div {  position: absolute;  top: -10px;  left: 5px;}
          div {
  position: absolute;
  top: -10px;
  left: 5px;
}

Обычно для позиционирования элемента достаточно задать два из четырёх свойств. Приоритет отдаётся свойствам left и top.

Если left и right будут противоречить друг другу, right игнорируется. Но при direction: rtl приоритет будет отдан свойству right. В паре bottom и top то же верно для bottom.

При position: absolute и position: fixed, если их ширина и высота не задана явно и ориентируется на количество контента, можно задать все четыре свойства. Это заставит блок растянуться во всю ширину и высоту родителя или до нужных вам размеров. Все четыре свойства можно задать всего одной строкой при помощи свойства

inset.

При position: relative можно задать только одно из пары left/right и top/bottom, второе будет игнорироваться.

При position: static свойства top, left, right и bottom игнорируются всегда.

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

position

ctrl + alt + ←

→

position: sticky

ctrl + alt + →

left | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+3.1+1.0+1.0+1.0+

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

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

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Для позиционированного элемента определяет расстояние от левого края родительского элемента, не включая отступ, поле и ширину рамки, до левого края дочернего элемента. Отсчет координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его левого края (рис. 1).

Рис. 1. Значение свойства left относительно окна браузера

В случае значения relative, left отсчитывается от левого края исходного положения элемента (рис. 2).

Рис. 2. Значение свойства left относительно исходного положения

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

Рис. 3. Значение свойства left относительно родителя

Синтаксис

left: значение | проценты | auto | inherit

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение свойства left может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от ширины родительского элемента.

auto
Не изменяет положение элемента.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>left</title>
  <style>
   .layer1 {
    position: absolute; /* Абсолютное позиционирование */
    left: 20px; /* Положение от левого края */
    background: #fc3; /* Цвет фона */
    margin: 7px; /* Отступы вокруг элемента */
   }
   .layer2 {
    position: relative; /* Относительное позиционирование */
    left: -12px; /* Положение от левого края */
    top: 13px; /* Положение от верхнего края */
    border: 1px solid black; /* Параметры рамки */
    padding: 5px; /* Поля вокруг текста */
    margin: 7px; /* Отступы вокруг элемента */
   }
  </style>
 </head> 
 <body>
  <div>
   <div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
    nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
    volutpat.
 
  Ut wisis enim ad minim veniam, quis nostrud exerci tution 
    ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
   </div>
  </div> 
 </body>
</html>

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

Рис. 4. Применение свойства left

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

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

Браузеры

В браузере Internet Explorer 6 для абсолютно позиционированных элементов нельзя одновременно задать свойства top, left, right, bottom.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

сверху/снизу/слева/справа | CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США! . Они влияют только на позиционированные элементы, которые являются элементами со свойством position , установленным на любое значение, кроме static . Например: относительный , абсолютный , фиксированный или липкий .

 раздел {
  <сверху || дно || слева || справа>: <длина> || <процент> || авто || наследовать;
}

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

 button .icon {
  положение: родственник;
  верх: 1 пиксель;
}

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

 .контейнер {
  положение: родственник;
}
.контейнер заголовок {
  положение: абсолютное;
  сверху: 0;
}

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

  • любая допустимая длина CSS
  • процент высоты содержащего элемента (для сверху и снизу ) или ширины (для слева и справа )
  • авто
  • унаследовать

Обычно элемент перемещается от заданной стороны, когда его значение положительное, и приближается к ней, когда значение отрицательное. В приведенном ниже примере положительная длина для top перемещает элемент вниз (от вершины), а отрицательная длина для top перемещает элемент вверх (к вершине):

См. Pen
Top: положительные и отрицательные значения от Matsuko Friedland (@missmatsuko)
на CodePen.

Позиция

Размещение элемента со значением сверху , снизу , слева или справа зависит от его значения для позиции . Давайте посмотрим, что произойдет, если мы установим такое же значение для top для элементов с разными значениями для position .

static

Свойство top не влияет на непозиционированные элементы (элементы с позицией установлены на static ). Так элементы располагаются по умолчанию. Вы можете использовать position: static; как один из методов отмены эффекта поверх на элементе.

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

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

См. Pen
Top: родственник Мацуко Фридланд (@missmatsuko)
на CodePen.

absolute

Когда top установлен для элемента с position установлен на absolute , элемент будет перемещаться вверх или вниз относительно своего ближайшего позиционированного предка (или документа, если нет позиционированных предки).

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

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

См. Pen
Top: absolute от Мацуко Фридланд (@missmatsuko)
на CodePen.

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

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

См. Pen
Top: исправлено CSS-Tricks (@css-tricks)

на CodePen.

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

См. прокрутку Pen
: фиксированная или абсолютная от CSS-Tricks (@css-tricks)
на CodePen.

sticky

Когда top установлен для элемента с position установлен на sticky , элемент будет перемещаться вверх или вниз относительно ближайшего предка с помощью поля прокрутки (или области просмотра, если нет предок имеет поле прокрутки), ограниченное границами содержащего его элемента.

Установка top на закрепленном элементе с позиционированием мало что дает, если его контейнер не выше, чем он есть, и у вас достаточно контента для прокрутки. Как и в случае с фиксированным , элемент останется в поле зрения при прокрутке. В отличие от фиксированного , элемент исчезнет из поля зрения, как только достигнет краев содержащего его элемента.

См. Прокрутка пера
: фиксированная или липкая от CSS-Tricks (@css-tricks)
на CodePen.

Ловушки

Настройка противоположных сторон

Вы можете установить значение для каждого из верхних , нижних , левых и правых на одном элементе. Когда вы устанавливаете значения для противоположных сторон ( сверху и снизу или слева и справа ), результат может не всегда соответствовать вашим ожиданиям.

В большинстве случаев нижний игнорируется, если верхний уже установлен, а правый игнорируется, если осталось уже установлено. Когда для направления установлено значение rtl (справа налево), влево игнорируется вместо вправо . Для того, чтобы каждое значение имело эффект, элемент должен иметь position установленное на абсолютное или фиксированное и height установленное на auto (по умолчанию).

В этом примере мы устанавливаем top , bottom , left и right равными `20px`, и ожидаем, что каждая сторона внутреннего блока будет на расстоянии 20px от сторон внешнего блока:

См. Настройки пера
сверху, снизу, слева и справа от CSS-Tricks (@css-tricks)
на CodePen.

Когда фиксировано не относительно окна просмотра

Элементы с позицией , установленной на фиксированное , не всегда позиционируются относительно окна просмотра. Он будет расположен относительно своего ближайшего предка со свойством transform , Perfomance или filter , установленным на любое значение, кроме none , если оно существует.

Добавление или удаление пробела

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

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

См. поток документов Pen
от Мацуко Фридланд (@missmatsuko)
на CodePen.

Поддержка браузера

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

margin — CSS: Каскадные таблицы стилей

Свойство margin сокращенного CSS-свойства устанавливает область полей со всех четырех сторон элемента.

Это свойство является сокращением для следующих свойств CSS:

  • верхнее поле
  • поле справа
  • нижняя граница
  • поле слева 
 /* Применить ко всем четырем сторонам */
поле: 1em;
поле: -3px;
/* сверху и снизу | Лево и право */
маржа: 5% авто;
/* сверху | влево и вправо | нижний */
поля: 1em авто 2em;
/* сверху | право | дно | левый */
поле: 2px 1em 0 авто;
/* Глобальные значения */
маржа: наследовать;
поле: начальное;
маржа: вернуться;
поле: обратный слой;
маржа: не установлена;

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

  • Когда указано одно значение , оно применяет одно и то же поле ко всем четырем сторонам .
  • Когда указаны два значения , первое поле применяется к вверху и внизу , второй слева и справа .
  • Когда указаны три значения , первое поле применяется к верхнему , ​​второе — к правому и левому , ​​третье — к нижнему .
  • Когда для указаны четыре значения , поля применяются к верхнему , правому , нижнему и левому в указанном порядке (по часовой стрелке).

Значения

<длина>

Размер поля как фиксированное значение.

<процент>

Размер поля в процентах относительно встроенного размера ( ширина в горизонтальном языке, определяемый режимом письма ) содержащего блока.

авто

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

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

Верхнее и нижнее поля не влияют на незаменяемых встроенных элементов, таких как или .

Горизонтальное центрирование

Чтобы центрировать что-либо по горизонтали в современных браузерах, вы можете использовать дисплей : гибкий; выравнивание содержимого : по центру; .

Однако в более старых браузерах, таких как IE8-9, которые не поддерживают гибкую компоновку блоков, они недоступны. Чтобы центрировать элемент внутри его родителя, используйте margin: 0 auto; .

Свертывание полей

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

Initial value as each of the properties of the shorthand:
  • margin-bottom : 0
  • margin-left : 0
  • margin-right : 0
  • margin-top : 0
.0006 , таблица и встроенная таблица . Это также относится к ::first-letter и ::first-line .
Inherited no
Percentages refer to the width of the containing block
Computed value as each of the properties of the shorthand:
  • margin-bottom : the указанный процент или абсолютная длина
  • margin-left : заданный процент или абсолютная длина
  • margin-right : заданный процент или абсолютная длина
  • margin-top : заданный процент или абсолютная длина
Тип анимации длина
 margin = 
 <'margin-top'>{1,4}

Простой пример

HTML 
 
Этот элемент расположен по центру

Этот элемент расположен за пределами своего контейнера.
CSS 
 .центр {
  маржа: авто;
  фон: лайм;
  ширина: 66%;
}
.снаружи {
  поле: 3rem 0 0 -3rem;
  фон: голубой;
  ширина: 66%;
}

Еще примеры 

 маржа: 5%; /* Все стороны: маржа 5% */
поле: 10 пикселей; /* Все стороны: поле 10 пикселей */
поля: 1.6em 20px; /* верх и низ: поле 1.6em */
/* слева и справа: поле 20px */
поле: 10px 3% -1em; /* верх: поле 10px */
/* слева и справа: маржа 3% */
/* внизу: поле -1em */
поля: 10px 3px 30px 5px; /* верх: поле 10px */
/* справа: поле 3 пикселя */
/* внизу: поле 30px */
/* слева: поле 5px */
поле: 2em авто; /* верх и низ: поле 2em */
/* Коробка центрирована по горизонтали */
маржа: авто; /* верх и низ: поле 0 */
/* Коробка центрирована по горизонтали */
Спецификация
Модуль CSS Box Model Level 3
# margin

В браузере разрешена загрузка только таблиц BCD. Включите JavaScript для просмотра данных.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *