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

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

Поведінка цієї властивості залежить від значення властивості position:

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

Якщо для елементу зазначено відразу left і right, його позиція перевизначається. Якщо це так, властивість left має перевагу над right, коли контейнер розташований ліворуч направо, і навпаки: right має перевагу над left, якщо контейнер розташований праворуч наліво.

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

правити

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

правити

Нотатка

Значення властивості left може бути і від'ємним, в цьому випадку можливі накладення різних елементів один на одного.

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

Нотатка

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

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

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

Синтаксис

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

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

auto

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

автор: Svitlana

правити

length

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

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

%

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

автор: Svitlana

правити

Переглядачі

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

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

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

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

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

Приклади

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

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

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

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

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

.wrapper {
  max-width: 250px;
  margin: auto;
  background-color: #eee;
  position: relative;
  height: 300px;
}

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

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

.absolute {
  position: absolute;
  left: -4em;
  bottom: 0;
}

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

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

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

<div class="box">

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

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

<strong>left: </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: gold;
  padding: 16px;
  position: absolute;
  top: 50%;
  left: 24px;
}

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

<div class="row"><span class="tag static">position: static; left: 60px</span></div>
<div class="row"><span class="tag relative">position: relative; left: 60px</span></div>

.row {
    margin-bottom: 8px;
    padding: 6px;
    background: #eef2f7;
}
.tag {
    padding: 4px 8px;
    color: #fff;
    background: #1e6fd9;
    left: 60px;
}
.static {
    position: static;
}
.relative {
    position: relative;
}