Css right: :right — CSS | MDN

Leave a Comment / Css / By /

right — CSS | MDN

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

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

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

Когда заданы оба свойства left (en-US) и right, и элемент не может растянуться, чтобы им соответствовать, то позиционированние элемента is overspecified. В этом случае значение left имеет приоритет, when the container is left-to-right; и наоборот, значение right имеет приоритет, when the container is right-to-left.

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

Значения

<length>

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

  • for absolutely positioned elements, the distance to the right edge of the containing block.
  • for relatively positioned elements, the distance that the element is moved to the left of its normal position.
<percentage>

A <percentage> of the containing block’s width.

auto

Specifies that:

  • for absolutely positioned elements, the position of the element is based on the left (en-US) property, while width: auto is treated as a width based on the content; or if left is also auto, the element is positioned where it should horizontally be positioned if it were a static element.
  • for relatively positioned elements, the distance of the element from its normal position is based on the left (en-US) property; or if left is also auto, the element is not moved horizontally at all.
inherit

Specifies that the value is the same as the computed value from its parent element (which might not be its containing block). This computed value is then handled as if it were a <length>, <percentage>, or the auto keyword.

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

right = 
auto                 | (en-US)
<length-percentage>  
"><length-percentage> = 
<length>      | (en-US)
<percentage>  
#example_3 {
  width: 100px;
  height: 100px;
  background-color: #FFC7E4;
  position: relative;
  top: 20px;
  left: 20px;
}
#example_4 {
  width: 100px;
  height: 100px;
  background-color: #FFD7C2;
  position: absolute;
  bottom: 10px;
  right: 20px;
}

<div>Example 3</div>
<div>Example 4</div>
Specification
CSS Positioned Layout Module Level 3
# insets

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.
  • position, left (en-US), top, bottom

Last modified: , by MDN contributors

right | 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-right

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

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

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

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

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

Синтаксис

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

Значения

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

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

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>right</title>
   <style>
    .leftcol { 
     position: absolute; /* Абсолютное позиционирование */
     top: 20px; /* Положение от верхнего края */
     left: 10px; /* Положение от левого края */
     width: 100px; /* Ширина блока */
     background: #fc3; /* Цвет фона */
     border: 1px solid #000; /* Параметры рамки */
     padding: 10px; /* Поля вокруг текста */
    } 
    .centercol { 
     position: relative; /* Относительное позиционирование */
     background: maroon; /* Цвет фона */
     padding: 10px; /* Поля вокруг текста */
     color: white; /* Цвет текста */
     border: 1px solid #000; /* Параметры рамки */
     margin: 20px 240px 0 140px; /* Отступы вокруг блока */
    }
    .rightcol { 
     position: absolute; /* Абсолютное позиционирование */
     top: 20px; /* Положение от верхнего края */
     right: 10px; /* Положение от правого края */
     width: 200px; /* Ширина блока */
     background: #ccc; /* Цвет фона */
     border: 1px solid black; /* Параметры рамки */
     padding: 10px; /* Поля вокруг текста */
    }
   </style>
  </head>
 <body> 
  <div>Колонка 1</div>
  <div>Колонка 2</div>
  <div>Колонка 3</div>
 </body>
</html>

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

3.

Рис. 3. Применение свойства right

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

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

Браузеры

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

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

Позиционирование

Свойство права CSS

❮ Предыдущий Полное руководство по CSS Далее ❯


Пример

Установить правый край позиционированного элемента

на 150 пикселей левее правого края его ближайшего позиционированного предка:

div.absolute {
  position: absolute;
  справа: 150 пикселей;
  ширина: 200 пикселей;
  высота: 120 пикселей;
  граница: 3 пикселя сплошная зеленый;
} 

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

Другие примеры «Попробуйте сами» ниже.

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

Свойство right влияет на горизонтальное положение позиционируемого элемента. Это свойство не влияет на непозиционированные элементы.

  • Если положение: абсолютное; или положение: фиксированное; —
    Свойство right     устанавливает правый край элемента на единицу вправо правого края своего ближайшего расположенного предка.
  • Если положение: относительное; — правый Свойство устанавливает правый край элемента на единицу слева/справа от его нормальное положение.
  • Если положение: липкое; — свойство right ведет себя так, как будто его позиция относительный, когда элемент находится внутри области просмотра, и, как и его положение, фиксируется, когда он снаружи.
  • Если позиция: статическая; — свойство right не действует.

Показать демо ❯

Значение по умолчанию: авто
Унаследовано: нет
Анимация: да. Читать про анимированный Попытайся
Версия: CSS2
Синтаксис JavaScript: объект . style.right=»200px» Попытайся

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

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

Собственность
справа 1,0 5,5 1,0 1,0 5,0

Синтаксис CSS

справа: авто| длина |начальный|наследовать;

Значения свойств

Значение Описание Демо
авто Позволяет браузеру вычислить положение правого края. Это по умолчанию Демонстрация ❯
длина Задает положение правого края в пикселях, см и т. д.
Допускаются отрицательные значения. Читать о единицах длины		 Демонстрация ❯
% Задает положение правого края в % от содержащего элемента. Допускаются отрицательные значения Демонстрация ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать о начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Дополнительные примеры

Пример

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

div.b {
  позиция: абсолютная;
справа: -20px;
  ширина: 100 пикселей;
  высота: 120 пикселей;
  граница: 3 пикселя сплошного синего цвета;
}

div.c {
  позиция: абсолютная;
  справа: 150 пикселей;
  ширина: 200 пикселей;
высота: 120 пикселей;
  граница: 3 пикселя сплошного зеленого цвета; Связанные страницы

Учебник CSS: Позиционирование CSS

❮ Предыдущий Полное руководство по CSS Далее ❯


NEW

Мы только что запустили
Видео W3Schools

Узнать

COLOR PICKER
КОД ИГРЫ

Играть в игру

Лучшие учебники
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

9003

35 Основные ссылки HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference


3 Top6s Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

Авторское право 1999-2022 по данным Refsnes. Все права защищены.
W3Schools работает на основе W3.CSS.

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

Свойство CSS right участвует в определении горизонтального положения позиционируемого элемента. Это не влияет на непозиционированные элементы.

 /* <длина> значений */
справа: 3 пикселя;
справа: 2,4 эм;
/* <процентов> от ширины содержащего блока */
справа: 10%;
/* Значение ключевого слова */
справа: авто;
/* Глобальные значения */
правильно: наследовать;
справа: инициал;
справа: вернуться;
справа: обратный слой;
справа: не установлено;

Значения

<длина>

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

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

A <процент> ширины содержащего блока.

авто

Указывает, что:

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

Указывает, что значение совпадает с вычисленным значением из его родительского элемента (который может не быть содержащим его блоком). Затем это вычисленное значение обрабатывается так, как если бы оно было числом 9.0025 <длина> , <процент> или ключевое слово auto .

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

  • Свойство определяет расстояние между внешним полем правого края элемента и внутренней границей правого края содержащего его блока.
  • Когда для position установлено значение относительно , свойство right указывает расстояние, на которое правый край элемента перемещается влево от его нормального положения.
  • Когда для position установлено значение sticky , свойство right используется для вычисления прямоугольника липких ограничений.
  • Когда для position установлено значение static , свойство right не имеет эффекта .

Когда определены оба параметра , левый и , правый , если этому не препятствуют другие свойства, элемент будет растягиваться, чтобы удовлетворить оба требования. Если элемент не может растянуться, чтобы удовлетворить обоим требованиям — например, если объявлена ​​ширина — позиция элемента будет over-constrained . В этом случае значение left имеет приоритет, когда контейнер располагается слева направо; значение right имеет приоритет, когда контейнер расположен справа налево.

 вправо = 
 авто | 
  
 "> = 
  |

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

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


Абсолютно позиционировано
CSS 
 # относительный {
  ширина: 100 пикселей;
  высота: 100 пикселей;
  цвет фона: #ffc7e4;
  положение: родственник;
  верх: 20 пикселей;
  слева: 20 пикселей;
}
#абсолют {
  ширина: 100 пикселей;
  высота: 100 пикселей;
  цвет фона: #ffd7c2;
  положение: абсолютное;
  внизу: 10 пикселей;
  справа: 20 пикселей;
}
Результат

Объявление левого и правого

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

HTML 
 

  Родитель
  
Без ширины

  
ширина: 100 пикселей
CSS 
 раздел {
  контур: 1px сплошной #cccccc;
}
# родитель {
  ширина: 200 пикселей;
  высота: 200 пикселей;
  цвет фона: #ffc7e4;
  положение: родственник;
}
/* объявляем и левый, и правый */
#ширина,
# без ширины {
  цвет фона: #c2ffd7;
  положение: абсолютное;
  слева: 0;
  справа: 0;
}
/* объявить ширину */
#ширина {
  ширина: 100 пикселей;
  верх: 60 пикселей;
}
Результат
Спецификация
CSS -позиционированный модуль Mayout Level 3
# insets

BCDAN 3.

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

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