CSS top — зсув елемента від верхнього краю

Властивість top визначає відстань від верхнього краю батьківського елементу до верхнього краю дочірнього елемента.

Відлік координат залежить від значення властивості position. Якщо воно дорівнює absolute, як батька виступає вікно браузера і положення елемента визначається від його верхнього краю. Якщо значення relative, top відраховується від верхнього краю вихідного положення елемента. Якщо для батьківського елемента задано position: relative, то абсолютне позиціонування дочірніх елементів визначає їхнє положення від верхнього краю батька.

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

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

правити

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

правити

Нотатка

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

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

Нотатка

Якщо position:static, тоді властивість top не має ніякого ефекту.

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

Нотатка

Елемент буде позиціонуватися, якщо значення його властивості position не дорівнює static.

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

Нотатка

Якщо елемент з position:absolute не має батьків, він використовує в якості батька вікно браузера, і рухається разом з прокруткою сторінки.

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

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

Синтаксис

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

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

auto

Браузер самостійно розрахує велечину відступа. Без задання.

автор: Svitlana

правити

length

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

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

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

%

Встановлює відстань відступу в %. Від'ємні значення дозволяються.

автор: Svitlana

правити

Переглядачі

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

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

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

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

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

Приклади

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

<div class="area">
    <div class="absolute">top: 80px</div>
</div>

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

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

<div class="area">
    <div class="box st">position: static</div>
    <div class="box rel">position: relative</div>
    <div class="box abs">position: absolute</div>
</div>

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

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

.box {
    top: 30px;
    width: 200px;
    padding: 8px;
    margin-bottom: 10px;
    border: 2px solid #888;
    background: #fff;
}

.st {
    position: static;
}

.rel {
    position: relative;
    background: rgba(255, 215, 0, .55);
    border-color: #c9a227;
}

.abs {
    position: absolute;
    left: 230px;
    background: rgba(120, 200, 255, .55);
    border-color: #3b8ec2;
}

<div class="box">

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

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

<strong>top: </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;
  top: 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('top', num + 'px'));
  document.querySelectorAll('#block').forEach((n) => n.innerHTML = num + 'px');
}));

<div class="info">
	<p>За допомогою властивості <code>top</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 {
	top: 16px;
}

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

<div class="block">Відстань від гори, задана за допомогою top</div>

.block {
  width: 250px;
  height: 100px;
  padding: 25px;
  border: 2px solid orange;
  position: absolute;
  top: 10em;
 }