САЙТЫ  ПОД  КЛЮЧ
ОНЛАЙН-СЕРВИСЫ СПРАВОЧНИКИ SEO-ИНСТРУМЕНТЫ РАЗВЛЕЧЕНИЯ

Справочник по CSS

left

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+ 1.0+ 3.5+ 3.1+ 1.0+ 1.0+ 1.0+

Краткая информация

Значение по умолчанию auto
Наследуется Нет
Применяется Ко всем элементам
Ссылка на спецификацию http://www.w3.org/TR/CSS21/visuren.html#propdef-left

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Для позиционированного элемента определяет расстояние от левого края родительского элемента, не включая отступ, поле и ширину рамки, до левого края дочернего элемента. Отсчет координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его левого края (рис. 1).

Значение свойства left относительно окна браузера

Рис. 1. Значение свойства left относительно окна браузера

В случае значения relative, left отсчитывается от левого края исходного положения элемента (рис. 2).

Значение свойства left относительно исходного положения

Рис. 2. Значение свойства left относительно исходного положения

Если для родительского элемента задано positionrelative, то абсолютное позиционирование дочерних элементов определяет их положение от левого края родителя.

Значение свойства left относительно родителя

Рис. 3. Значение свойства left относительно родителя

Синтаксис

left: значение | проценты | auto | inherit

Значения

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

auto
Не изменяет положение элемента.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>left</title>
  <style>
   .layer1 {
    position: absolute; /* Абсолютное позиционирование */
    left: 20px; /* Положение от левого края */
    background: #fc3; /* Цвет фона */
    margin: 7px; /* Отступы вокруг элемента */
   }
   .layer2 {
    position: relative; /* Относительное позиционирование */
    left: -12px; /* Положение от левого края */
    top: 13px; /* Положение от верхнего края */
    border: 1px solid black; /* Параметры рамки */
    padding: 5px; /* Поля вокруг текста */
    margin: 7px; /* Отступы вокруг элемента */
   }
  </style>
 </head> 
 <body>
  <div class="layer1">
   <div class="layer2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
    nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
    volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution 
    ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
   </div>
  </div> 
 </body>
</html>

Результат данного примера показан на рис. 4.

Применение свойства left

Рис. 4. Применение свойства left

Объектная модель

[window.]document.getElementById("elementID").style.left

Браузеры

В браузере Internet Explorer 6 для абсолютно позиционированных элементов нельзя одновременно задать свойства top, left, right, bottom.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Справочник по CSS. Версия 7.0 от 5.11.12

© 2002–2012 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru

htmlbook.ru


Это интересно

Перфокарты, которые использовали в качестве средств ввода и вывода информации на самых ранних компьютерах, были спроектированы шириной в 80 колонок. Чтобы было удобнее переносить программы, первые дисплеи также были рассчитаны на ширину строки в 80 символов. Когда появилась электронная почта, первые протоколы для неё снова оперировали 80-символьными строками. И хотя мониторы с тех пор сильно прогрессировали, почти все популярные почтовые системы до сих пор разбивают строки по 80 символов для обеспечения совместимости со старыми программами. Даже бинарные файлы конвертируются с помощью MIME base64 в строки из букв и цифр длиной не более 80 символов. Можно сказать, что программы изменяют пересылаемые нами видеофайлы для совместимости с перфокартами.


Наши реквизиты
WMID: 309688839848
WMR: R325885159214
E-mail: 
  BL:Бизнес-уровень [BL]
QR-код сайта
Онлайн-радио
Больше радиостанций