CSS bottom — зміщення від нижнього краю

CSS властивість bottom вказує зміщення позиціонованого елемента щодо нижнього краю.

Вона не впливає на елементи, у яких для position зазначено static або не зазначено жодного значення. Як саме властивість bottom буде зміщувати елемент, залежить від конкретного значення властивості position:

• Елемент з фіксованим позиціонуванням (position: fixed;) зміщується вниз відносно нижнього краю вікна браузера.
• Елемент з абсолютним позиціонуванням (position: absolute;) зміщується вниз відносно нижнього краю його першого позиціонованого (не static) батьківського елемента. Якщо у елемента немає батька з позиціонуванням (relative, absolute або fixed), тоді він буде зміщуватися відносно нижнього краю вікна браузера.
• Елемент з відносним позиціонуванням (position: relative;) зміщується вниз відносно нижнього краю його поточної позиції.
• Для елемента зі статичним позиціонуванням (position: static;) застосування властивості bottom не дасть ніякого ефекту.

Коли вказані властивості top і bottom й висота невизначена, дорівнює auto або 100%, вгорі та знизу відстані дотримуються. В усіх інших ситуаціях, якщо висота обмежена, властивість top сильніше, і bottom ігнорується.

Як значення приймаються будь-які одиниці довжини, прийняті в CSS - наприклад, пікселі (px), дюйми (in), пункти (pt) та ін. Значення властивості bottom може бути і негативним, в цьому випадку можливі накладення різних елементів один на одного. При завданні значення у відсотках, положення елемента обчислюється залежно від висоти батьківського елементу.

правити

Загальний опис

правити

Нотатка

В IE до 7 версії, якщо вказані top і bottom одночасно, top має перевагу в будь-якому випадку, отримує значення від bottom, а власне ігнорує.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

bottom: auto|%|length|initial|inherit;

Властивість bottom може отримувати 5 значень:

auto

Не змінює положення елемента

автор: Svitlana

правити

length

Будь-які одиниці довжини, прийняті в CSS - наприклад, пікселі (px), дюйми (in), пункти (pt) та ін. Значення властивості bottom може бути і негативним, в цьому випадку можливі накладення різних елементів один на одного

автор: Svitlana

правити

%

Положення елемента обчислюється залежно від висоти батьківського елементу

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	6	12	5

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<div class="area">
    <div class="absolute">bottom: 70px</div>
</div>

.area {
    position: relative;
    height: 220px;
    background: #eee;
}

div.absolute {
    position: absolute;
    bottom: 70px;
    width: 200px;
    height: 100px;
    border: 3px solid #8AC007;
}

<div class="block static">
  <p>Нормальний блок</p>
</div>
<div class="block absolute">
  <p>Розташований внизу, за допомогою <strong>bottom</strong></p>
</div>

.block {
  width: 350px;
  height: 100px;
  text-align: center;
  border: 2px solid #666;
}

.static {
  position: static; /* default */
}

.absolute {
  position: absolute;
  bottom: 1em;
}

<div class="info">
	<p>За допомогою властивості <code>bottom</code> ми можемо вказати зміщення позиціонованого елемента щодо нижнього краю.</p>
	<p>Перший елемент зміщений на <em>16px</em>, другий - <em>40%</em>.</p>
</div>

<div class="wrapper">
	<div class="block one"><div class="child"><span>16px</span></div></div>
	<div class="block two"><div class="child"><span>40%</span></div></div>
</div>

* {
	box-sizing: border-box;
}

body {
	font-family: monospace;
	font-size: 17px;
}

.info {
	padding: 16px;
}

code {
	font-weight: 700;
	color: #444;
	border-bottom: 2px solid #666;
}

.wrapper {
	display: flex;
	justify-content: space-around;
}

.block {
	width: 25%;
	height: 150px;
	background-color: gold;
	position: relative;
}

.block .child {
	background-color: #222;
	display: inline-block;
	color: #fff;
	position: absolute;
	left: 0;
	padding: 12px;
}

.block.one .child {
	bottom: 16px;
}

.block.two .child {
	bottom: 40%;
}

<div class="box">

<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>bottom</strong>.</p>

<p>Вона встановлює зміщення позиціонованого елемента щодо нижнього краю.</p>

<strong>bottom: </strong>
<input type="number" class="input" id="num" value="24">px
<strong>;</strong>
  
</div>

<div id="block">24px</div>

* {
  box-sizing: border-box;
}

body {
  font-family: monospace;
  font-size: 16px;
  line-height: 1.45;
  height: 100vh;
  padding: 16px;
}

.box {
  background-color: #f7f7f7;
  padding: 16px;
}

.input {
  margin-bottom: 36px;
  width: 75px;
}

#block {
  background-color: rgba(255, 215, 0, .45);
  padding: 16px;
  position: absolute;
  bottom: 24px;
  left: 16px;
}

document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
  var num = document.querySelector('#num').value;
  document.querySelectorAll('#block').forEach((n) => n.style.setProperty('bottom', num + 'px'));
  document.querySelectorAll('#block').forEach((n) => n.innerHTML = num + 'px');
}));

<div class="area">
    <div class="box b0">bottom: 0</div>
    <div class="box b60">bottom: 60px</div>
</div>
<p class="note">Що більше значення <code>bottom</code>, то вище стоїть елемент.</p>

body {
    font-family: monospace;
    font-size: 15px;
    padding: 16px;
}

.area {
    position: relative;
    height: 220px;
    background: #eee;
    border: 2px solid #bbb;
}

.box {
    position: absolute;
    left: 16px;
    width: 200px;
    padding: 8px;
    background: rgba(255, 215, 0, .55);
    border: 2px solid #c9a227;
}

.b0 {
    bottom: 0;
}

.b60 {
    left: 240px;
    bottom: 60px;
}

.note {
    color: #555;
}