Css right: right ⚡️ HTML и CSS с примерами кода

Leave a Comment / Css / By /

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.

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

right ⚡️ HTML и CSS с примерами кода

Свойство

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

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

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

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

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

Демо

Позиционирование
  • bottom
  • clear
  • display
  • float
  • left
  • position
  • right
  • top
  • z-index

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
/* <length> values */
right: 3px;
right: 2.4em;
/* <percentage>s of the width of the containing block */
right: 10%;
/* Keyword value */
right: auto;
/* Global values */
right: inherit;
right: initial;
right: revert;
right: revert-layer;
right: unset;

Значения

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

auto
Не изменяет положение элемента.

Значение по-умолчанию: auto

Применяется ко всем элементам

Спецификации

  • CSS Positioned Layout Module Level 3
  • CSS Level 2 (Revision 1)

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

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!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>

Свойство права 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: свойство left

Ссылка HTML DOM: свойство right

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

ВЫБОР ЦВЕТА

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

Основные каталожные номера
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

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

ФОРУМ | О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Право CSS Собственность

❮ Пред. Следующий ❯

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

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

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

Действие права зависит от того, как расположен элемент (см. свойство position).

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

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

 

  <голова>
    Название документа
    <стиль>
      картинка {
        положение: абсолютное;
        справа: 35 пикселей;
      }
    
  
  <тело>
     
Правильный пример свойства
 
     png" alt="Логотип W3docs">

Попробуй сам »

Результат

Пример правильного свойства, указанного в «%»: 

 

  <голова>
    Название документа
    <стиль>
      дел {
        высота: 150 пикселей;
        ширина: 100%;
        цвет фона: #ccc;
        цвет: #ffffff;
      }
      картинка {
        положение: абсолютное;
        справа: 30%;
        верх: 120 пикселей;
      }
    
  
  <тело>
     
Правильный пример свойства
 
    Логотип W3docs
    
Это какой-то элемент div.

Попробуй сам »

Пример свойства right с «начальным» значением: 

  <голова>Название документа <стиль> дел {
 положение: родственник;
 максимальная ширина: 300 пикселей;
 высота строки: 20 пикселей;
 }
 п {
 положение: абсолютное;
 справа: инициал;
 цвет фона: светло-зеленый;
 }   <тело>
Правильный пример свойства
 <дел> Lorem ipsum, или lipsum, как его иногда называют, представляет собой фиктивный текст, используемый при размещении печатных, графических или веб-дизайнов.

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

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