diff options
Diffstat (limited to 'files/ru/web/css/top')
| -rw-r--r-- | files/ru/web/css/top/index.html | 211 |
1 files changed, 211 insertions, 0 deletions
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 +--- +<div>{{CSSRef}}</div> + +<p><a href="/ru/docs/Web/CSS" title="CSS">CSS</a> свойство <strong><code>top</code></strong> частично определяет вертикальную позицию позиционируемого элемента. Оно не влияет на непозиционируемые элементы (т.е. <strong><code>top</code></strong> не применится, если задано <code>position: static</code>).</p> + +<div>{{EmbedInteractiveExample("pages/css/top.html")}}</div> + +<p class="hidden">Исходный код этого интерактивного примера хранится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на перенос.</p> + +<p>Эффект свойства <code>top</code> зависит от того, как позиционируется элемент (то есть от значения свойства {{cssxref("position")}}):</p> + +<ul> + <li>Когда задано <code>position: absolute</code> или <code>fixed</code> — значение свойства <code>top</code> устанавливается как расстояние между верхней гранью элемента и верхней гранью родительского контейнера.</li> + <li>Когда задано <code>position: relative</code> — значение свойство <code>top</code> устанавливается как расстояние, на которое смещается верхний край элемента от нормальной позиции.</li> + <li>Когда задано <code>position: sticky</code> — свойство <code>top</code> работает так, как при <code>position: relative</code> во время нахождения элемента внутри области просмотра, и как <code>position: fixed</code> вне области просмотра.</li> + <li>Когда задано <code>position: static</code> — свойство <code>top</code> <em>не имеет никакого эффекта</em>.</li> +</ul> + +<p>Когда заданы оба свойства <code>top</code> и {{cssxref("bottom")}}, а свойство {{cssxref("position")}} установлено как <code>absolute</code> или <code>fixed</code>, то оба свойства <code>top</code> и {{cssxref("bottom")}} учитываются. Во всех остальных ситуациях, если {{cssxref("height")}} как-либо ограничена или <code>position</code> установлено как <code>relative</code>, то свойство <code>top</code> будет учтено, а {{cssxref("bottom")}} — проигнорировано.</p> + +<h2 id="Синтаксис" name="Синтаксис">Синтаксис</h2> + +<pre class="brush:css no-line-numbers">/* Значения величин */ +top: 3px; +top: 2.4em; + +/* Процентные значения от высоты родительского блока */ +top: 10%; + +/* Ключевое слово */ +top: auto; + +/* Глобальные значения */ +top: inherit; +top: initial; +top: unset; +</pre> + +<h3 id="Значения">Значения</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>Отрицательная, нулевая или положительная величина, которая представляет: + <ul> + <li>для <em>абсолютно позиционируемых элементов</em> &mdash расстояние от верхнего края содержащего их блока;</li> + <li>для <em>относительно позиционируемых элементов</em> &mdash расстояние, на которое элемент смещается вниз, относительно своего положения в нормальном потоке.</li> + </ul> + </dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>Процент от высоты родительского блока.</dd> + <dt><code>auto</code></dt> + <dd>Это ключевое слово, которое означает: + <ul> + <li>для <em>абсолютно спозиционированных элементов</em> — позиция элемента опирается на свойство {{cssxref("bottom")}}, пока <code>height: auto</code> обрабатывается как высота в зависимости от содержимого; если так же и <code>bottom: auto</code>, то элемент располагается так же, как при статическом позиционировании.</li> + <li>для <em>относительно спозиционированных элементов</em> — расстояние элемента от его обычной позиции основано на свойстве {{cssxref ("bottom")}}; если значение <code>bottom</code> также <code>auto</code>, элемент вообще не перемещается по вертикали.</li> + </ul> + </dd> + <dt><code>inherit</code></dt> + <dd>Это ключевое слово указывает, что значение будет соответствовать вычисленному значению родительского блока (необязательно непосредственного родителя). Вычисляемое значение обрабатывается так же, как {{cssxref("<length>")}}, {{cssxref("<percentage>")}} или ключевое слово <code>auto</code>.</dd> +</dl> + +<h3 id="Формальный_синтаксис">Формальный синтаксис</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Пример" name="Пример">Пример</h2> + +<pre class="brush: 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; +}</pre> + +<pre class="brush: html"> <?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></pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Состояние</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'top')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Определяет <code>top</code> как анимируемое</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#propdef-top', 'top')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] В Internet Explorer до версии 7.0, когда оба свойства <code>top</code> и {{cssxref("bottom")}} определены, позиция элемента ограничена и свойство <code>top</code> имеет приоритет: вычисленное значение <code>bottom</code> устанавливается как <code>-top</code>, в то время как заданное для него значение игнорируется.</p> |