initial commit

1 files changed, 162 insertions, 0 deletions

diff --git a/files/ru/web/css/bottom/index.html b/files/ru/web/css/bottom/index.html
new file mode 100644
index 0000000000..db0c02f691
--- /dev/null
+++ b/files/ru/web/css/bottom/index.html
@@ -0,0 +1,162 @@
+---
+title: bottom
+slug: Web/CSS/bottom
+tags:
+  - CSS
+  - CSS Позиционирование
+  - CSS свойство
+  - Справка
+translation_of: Web/CSS/bottom
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ru/docs/Web/CSS" title="CSS">CSS</a> свойство <strong><code>bottom</code></strong> частично определяет вертикальную позицию позиционируемого элемента. Оно не влияет на непозиционируемые элементы (т.е. <strong><code>bottom</code></strong> не применится, если задано <code>position: static</code>).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/bottom.html")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на перенос.</p>
+
+<p>Эффект свойства <code>bottom</code> зависит от того, как позиционируется элемент (то есть от значения свойства {{cssxref("position")}}):</p>
+
+<ul>
+ <li>Когда задано <code>position: absolute</code> или <code>fixed</code> — свойство <code>bottom</code> устанавливает расстояние между нижним краем элемента и нижним краем содержащего его блока.</li>
+ <li>Когда задано <code>position: relative</code> — свойство <code>bottom</code> устанавливает расстояние, на которое нижний край элемента перемещается выше его обычной позиции.</li>
+ <li>Когда задано <code>position: sticky</code> — свойство <code>bottom</code> работает так, как при <code>position: relative</code> во время нахождения элемента внутри области просмотра, и как <code>position: fixed</code> вне области просмотра.</li>
+ <li>Когда задано <code>position: static</code> — свойство <code>bottom</code> <em>не имеет никакого эффекта</em>.</li>
+</ul>
+
+<p>Когда заданы оба свойства {{cssxref("top")}} и <code>bottom</code>, а свойство {{cssxref("height")}} не задано, <code>auto</code> или равно <code>100%</code>, то оба свойства {{cssxref("top")}} и <code>bottom</code> учитываются. Если свойство {{cssxref("height")}} задано, то свойство {{cssxref("top")}} будет учтено, а <code>bottom</code> — проигнорировано.</p>
+
+<h2 id="Синтаксис" name="Синтаксис">Синтаксис</h2>
+
+<pre class="brush:css no-line-numbers">/* Значения величин */
+bottom: 3px;
+bottom: 2.4em;
+
+/* Процентные значения от высоты родительского блока */
+bottom: 10%;
+
+/* Ключевое слово */
+bottom: auto;
+
+/* Глобальные значения */
+bottom: inherit;
+bottom: initial;
+bottom: unset;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Отрицательная, нулевая или положительная величина, которая представляет:
+ <ul>
+  <li>для <em>абсолютно позиционируемых элементов</em> &amp;mdash расстояние до нижнего края содержащего их блока;</li>
+  <li>для <em>относительно позиционируемых элементов</em> &amp;mdash расстояние, на которое элемент смещается вверх, относительно своего положения в нормальном потоке.</li>
+ </ul>
+ </dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Процент от высоты родительского блока.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Ключевое слово, которое указывает, что:
+ <ul>
+  <li>для <em>абсолютно спозиционированных элементов</em> — позиция элемента опирается на свойство {{cssxref("top")}}, пока <code>height: auto</code> обрабатывается как высота в зависимости от содержимого; если так же и <code>bottom: auto</code>, то элемент располагается так же, как при статическом позиционировании.</li>
+  <li>для <em>относительно спозиционированных элементов</em> — расстояние элемента от его обычной позиции основано на свойстве {{cssxref ("top")}}; если значение <code>top</code> также <code>auto</code>, элемент вообще не перемещается по вертикали.</li>
+ </ul>
+ </dd>
+ <dt><code>inherit</code></dt>
+ <dd>Это ключевое слово указывает, что значение будет соответствовать вычисленному значению родительского блока  (необязательно непосредственного родителя). Вычисляемое значение обрабатывается так же, как {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}} или ключевое слово <code>auto</code>.</dd>
+</dl>
+
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Пример" name="Пример">Пример</h2>
+
+
+
+<p>Этот пример демонстрирует разницу в поведении свойства <code>bottom</code>, когда {{cssxref("position")}} является <code>absolute</code> и <code>fixed</code>.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;h2&gt;Эксперимент&lt;/h2&gt;
+&lt;p&gt;Здесь&lt;br&gt;мы&lt;br&gt;набираем&lt;br&gt;побольше&lt;br&gt;высоты&lt;br&gt;для&lt;br&gt;вящей&lt;br&gt;наглядности&lt;br&gt;нашего&lt;br&gt;скромного,&lt;br&gt;но&lt;br&gt;очень&lt;br&gt;убедительного&lt;br&gt;эксперимента.&lt;br&gt;- Вот.&lt;/p&gt;
+&lt;div class="fixed"&gt;&lt;p&gt;Я фиксирован&lt;/p&gt;&lt;/div&gt;
+&lt;div class="absolute"&gt;&lt;p&gt;Я абсолютен&lt;/p&gt;&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  font-size: 30px;
+  line-height: 2em;
+}
+
+div {
+  width: 48%;
+  text-align: center;
+  background: rgba(55,55,55,.4);
+  border: 1px solid blue;
+}
+
+.absolute {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.fixed {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Пример','500','250')}}</p>
+
+<h2 id="Specifications" name="Specifications">Характеристики</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', 'bottom')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Определяет дно как анимацию.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Positioning', '#propdef-bottom', 'bottom')}}</td>
+   <td>{{Spec2('CSS3 Positioning')}}</td>
+   <td>Добавляет поведение для липкого позиционирования.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#choose-position', 'bottom')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Исходное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузером</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div>
+
+<p>{{Compat("css.properties.bottom")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}</li>
+</ul>