path: root/files/ru/web/css/bottom/index.html

---
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>