CSS-свойство right
Как использовать CSS-свойство right для задания правой позиции элемента. Значения свойства и практика.
CSS-свойство right задаёт горизонтальное смещение позиционированного элемента — насколько его правый край отступает от опорного края. Само по себе оно не даёт эффекта; оно работает только тогда, когда элемент имеет значение position, отличное от значения по умолчанию static.
На этой странице объясняется, как right ведёт себя при каждой схеме позиционирования, как оно взаимодействует с left и какие типичные ошибки стоит учитывать.
Как работает right
Опорный край, от которого отсчитывается right, полностью зависит от значения position элемента:
absoluteилиfixed—right— это расстояние между правым краем элемента и правым краем содержащего блока (дляabsolute— ближайший позиционированный предок; дляfixed— viewport).relative—rightсдвигает элемент влево относительно его нормального положения на заданное значение, при этом место, которое он изначально занимал, сохраняется. (Название кажется нелогичным: положительное значениеrightперемещает элемент от правого края, то есть влево.)sticky—right— это расстояние от правого края контейнера прокрутки, при достижении которого элемент «прилипает» во время прокрутки.static—rightне оказывает никакого эффекта.
Если position имеет значение static (по умолчанию), right игнорируется. Сначала задайте position: relative, absolute, fixed или sticky.
right и left
Если задать оба свойства — left и right — для одного элемента, результат зависит от значения width и направления письма:
- При
width: autoэлемент растягивается, чтобы удовлетворить оба смещения — это удобно для закрепления элемента на фиксированном расстоянии от каждой стороны контейнера. - При фиксированном
widthоба значения вступают в противоречие. При написании текста слева направо побеждаетleft, аrightигнорируется; при написании справа налево побеждаетright.
Если нужно только одно горизонтальное смещение, задайте только left или только right, оставив другое значением auto.
| Начальное значение | auto |
|---|---|
| Применяется к | Позиционированным элементам. |
| Наследуется | Нет. |
| Анимируется | Да. Позиция элемента поддерживает анимацию. |
| Версия | CSS2 |
| DOM-синтаксис | Object.style.right = "50px"; |
Синтаксис
right: auto | length | percentage | initial | inherit;Примеры
Пример со значением px
Здесь изображение выводится из нормального потока с помощью position: absolute и закрепляется на расстоянии 35px от правого края страницы.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
position: absolute;
right: 35px;
}
</style>
</head>
<body>
<h2>Right property example</h2>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs logo" width="146" height="41" />
</body>
</html>Результат
Пример со значением %
Процентное значение вычисляется относительно ширины содержащего блока, поэтому right: 30% сохраняет отступ пропорциональным при изменении размеров контейнера.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 150px;
width: 100%;
background-color: #ccc;
color: #ffffff;
}
img {
position: absolute;
right: 30%;
top: 120px;
}
</style>
</head>
<body>
<h2>Right property example</h2>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs logo" width="146" height="41" />
<div>This is some div element.</div>
</body>
</html>Пример со значением initial
initial сбрасывает right до значения по умолчанию auto, позволяя браузеру автоматически разместить правый край на основе других смещений и размеров блока.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
position: relative;
max-width: 300px;
line-height: 20px;
}
p {
position: absolute;
right: initial;
background-color: lightgreen;
}
</style>
</head>
<body>
<h2>Right property example</h2>
<div>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs
<p>Some text</p>
</div>
</body>
</html>Значения
| Значение | Описание | Пример |
|---|---|---|
| auto | Задаёт позицию правого края. Это значение по умолчанию данного свойства. | Пример » |
| length | Задаёт позицию правого края в px, em, rem и т.д. Допускаются отрицательные значения. | Пример » |
| % | Задаёт позицию правого края в процентах от ширины содержащего элемента. Допускаются отрицательные значения. | Пример » |
| initial | Устанавливает свойство в значение по умолчанию (auto), позволяя браузеру вычислять позицию автоматически. | Пример » |
| inherit | Наследует свойство от родительского элемента. |
Связанные свойства
Свойство right — одно из четырёх инсет-свойств, которые работают совместно с position:
left— смещает левый край элемента.top— смещает верхний край элемента.bottom— смещает нижний край элемента.