From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/right/index.html | 141 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 141 insertions(+) create mode 100644 files/ru/web/css/right/index.html (limited to 'files/ru/web/css/right/index.html') diff --git a/files/ru/web/css/right/index.html b/files/ru/web/css/right/index.html new file mode 100644 index 0000000000..8944f81b7f --- /dev/null +++ b/files/ru/web/css/right/index.html @@ -0,0 +1,141 @@ +--- +title: right +slug: Web/CSS/right +tags: + - CSS + - CSS Позиционирование + - CSS свойство +translation_of: Web/CSS/right +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/right.html")}}
+ + + +

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

+ + + +

Когда заданы оба свойства {{cssxref("left")}} и 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;
+
+ +

Значения

+ +
+
{{cssxref("<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.
    • +
+
+
{{cssxref("<percentage>")}}
+
A {{cssxref("<percentage>")}} of the containing block's width.
+
auto
+
Specifies that: +
    +
  • for absolutely positioned elements, the position of the element is based on the {{Cssxref("left")}} 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 {{Cssxref("left")}} 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 {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, or the auto keyword.
+
+ +

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

+ +
{{csssyntax}}
+ +

Примеры

+ +
#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 id="example_3">Example 3</div>
+<div id="example_4">Example 4</div>
+
+ +

{{ EmbedLiveSample('Examples', 500, 220) }}

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Transitions', '#animatable-css', 'right')}}{{Spec2('CSS3 Transitions')}}Defines right as animatable.
{{SpecName('CSS3 Positioning', '#propdef-right', 'right')}}{{Spec2('CSS3 Positioning')}}Adds behavior for sticky positioning.
{{SpecName('CSS2.1', 'visuren.html#propdef-right', 'right')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

{{cssinfo}}

+ +

Browser compatibility

+ + + +

{{Compat("css.properties.right")}}

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf