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/top/index.html | 211 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 211 insertions(+) create mode 100644 files/ru/web/css/top/index.html (limited to 'files/ru/web/css/top/index.html') diff --git a/files/ru/web/css/top/index.html b/files/ru/web/css/top/index.html new file mode 100644 index 0000000000..bdbc98174e --- /dev/null +++ b/files/ru/web/css/top/index.html @@ -0,0 +1,211 @@ +--- +title: top +slug: Web/CSS/top +tags: + - CSS + - CSS Позиционирование + - CSS свойство + - Справка +translation_of: Web/CSS/top +--- +
{{CSSRef}}
+ +

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

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

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

+ + + +

Когда заданы оба свойства top и {{cssxref("bottom")}}, а свойство {{cssxref("position")}} установлено как absolute или fixed, то оба свойства top и {{cssxref("bottom")}} учитываются. Во всех остальных ситуациях, если {{cssxref("height")}} как-либо ограничена или position установлено как relative, то свойство top будет учтено, а {{cssxref("bottom")}} — проигнорировано.

+ +

Синтаксис

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

Значения

+ +
+
{{cssxref("<length>")}}
+
Отрицательная, нулевая или положительная величина, которая представляет: +
    +
  • для абсолютно позиционируемых элементов &mdash расстояние от верхнего края содержащего их блока;
    • +
  • для относительно позиционируемых элементов &mdash расстояние, на которое элемент смещается вниз, относительно своего положения в нормальном потоке.
    • +
+
+
{{cssxref("<percentage>")}}
+
Процент от высоты родительского блока.
+
auto
+
Это ключевое слово, которое означает: +
    +
  • для абсолютно спозиционированных элементов — позиция элемента опирается на свойство {{cssxref("bottom")}}, пока height: auto обрабатывается как высота в зависимости от содержимого; если так же и bottom: auto, то элемент располагается так же, как при статическом позиционировании.
    • +
  • для относительно спозиционированных элементов — расстояние элемента от его обычной позиции основано на свойстве {{cssxref ("bottom")}}; если значение bottom также auto, элемент вообще не перемещается по вертикали.
    • +
+
+
inherit
+
Это ключевое слово указывает, что значение будет соответствовать вычисленному значению родительского блока (необязательно непосредственного родителя). Вычисляемое значение обрабатывается так же, как {{cssxref("<length>")}}, {{cssxref("<percentage>")}} или ключевое слово auto.
+
+ +

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

+ +
{{csssyntax}}
+ +

Пример

+ +
/* Для body могут быть использованы единицы px, также и для div */
+body{
+  width: 100%;
+  height: 100%;
+}
+
+/* div теперь может использовать значения в процентах (body ширина и высота установлены) */
+div {
+  position: absolute;
+  left: 15%;
+  top: 30%;
+  bottom: 30%;
+  width: 70%;
+  height: 40%;
+  text-align: left;
+  border: 3px rgb(0,0,0) solid;
+}
+ +
 <?xml version="1.0" encoding="utf-8"?>
+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+ <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+   <head>
+     <meta http-equiv="Content-Type" content="application/xhtml+xml" />
+     <title>Mozilla.org height top left width percentage CSS</title>
+     <style type="text/css">
+       /* Для body могут быть использованы единицы px, также и для div */
+       body {
+         width: 100%;
+         height: 100%;
+       }
+       /* div теперь может использовать значения в процентах (body ширина и высота установлены) */
+       div {
+         position: absolute;
+         left: 15%;
+         top: 30%;
+         bottom: 30%;
+         width: 70%;
+         height: 40%;
+         text-align: left;
+         border: 3px rgb(0,0,0) solid;
+       }
+     </style>
+   </head>
+   <body>
+      <center>
+        <div>
+             ...Some content...
+        </div>
+      </center>
+
+   </body>
+ </html>
+ +

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

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСостояниеКомментарий
{{SpecName('CSS3 Transitions', '#animatable-css', 'top')}}{{Spec2('CSS3 Transitions')}}Определяет top как анимируемое
{{SpecName('CSS2.1', 'visuren.html#propdef-top', 'top')}}{{Spec2('CSS2.1')}}Initial definition
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}[1]{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] В Internet Explorer до версии 7.0, когда оба свойства top и {{cssxref("bottom")}} определены, позиция элемента ограничена и свойство top имеет приоритет: вычисленное значение bottom устанавливается как -top, в то время как заданное для него значение игнорируется.

-- cgit v1.2.3-54-g00ecf