html.okpython.net
Основы создания сайтов
CSS :: Свойство left
css-свойство left (от англ. left – левый, левая сторона) определяет смещение позиционированного элемента по горизонтали, в зависимости от значения свойства position, применяемого к элементу:
- position: absolute – элемент удаляется из общего потока документа (при этом другие элементы занимают его место), а затем смещается на указанную величину относительно левой стороны области содержимого позиционированного родительского элемента (значение свойства у него не должно быть static) или, в случае отсутствия такового, относительно левой стороны области содержимого первого позиционированного элемента-предка. Если же для данного элемента не найдется и позиционированного элемента-предка, то смещение будет происходить относительно левой стороны области содержимого окна браузера (фрейма).
- position: fixed – элемент удаляется из общего потока документа (при этом другие элементы занимают его место), а затем смещается на указанную величину относительно левой стороны области содержимого окна браузера (фрейма).
- position: relative – элемент остается в общем потоке документа (соответственно его место не будет занято другими элементами из потока) и смещается на указанную величину относительно исходного положения левой стороны области содержимого элемента.
- position: static – применение к элементу свойства bottom не даст никакого эффекта.
Характеристики
- Значение по умолчанию: auto.
- Применяется: к позиционированным элементам.
- Наследуется: нет.
- Анимируется: да.
- JavaScript: object.style.left="value".
Синтаксис
left: <размер> | <проценты> | auto
Значения
- auto – положение позиционированного элемента не изменяется.
- размер – принимаются любые единицы измерения (смотреть), используемые в CSS. При этом положительные значения смещают элемент вправо, отрицательные – влево.
- проценты – значение в процентах, которое рассчитывается относительно высоты родительского элемента. При этом положительные значения смещают элемент вправо, отрицательные – влево.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css-position-3/#propdef-left
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/left
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> div{ position: relative; width: 500px; height: 300px; margin-top: 5em; padding: 10px; border: solid 5px blue; } p{ left: 30px; width: 400px; height: 70px; margin: 10px; padding: 1em; border: solid 5px green; background-color: yellow; } .pos_1{ position: fixed; } .pos_2{ position: static; } .pos_3{ position: relative; } .pos_4{ position: absolute; } </style> </head> <body> <div> <p style="background-color: violet"></p> <p class="pos_1"> position: fixed;<br> left: 30px; </p> </div> <div> <p style="background-color: violet"></p> <p class="pos_2"> position: static;<br> left: 30px; </p> </div> <div> <p style="background-color: violet"></p> <p class="pos_3"> position: relative;<br> left: 30px; </p> </div> <div> <p style="background-color: violet"></p> <p class="pos_4"> position: absolute;<br> left: 30px; </p> </div> </body> </html>
Пример №1
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №2</title> <style> div{ position: relative; width: 500px; height: 300px; margin-top: 5em; padding: 10px; border: solid 5px blue; } /* Используем отрицательные значения в процентах */ p{ left: -15%; width: 400px; height: 70px; margin: 10px; padding: 1em; border: solid 5px green; background-color: yellow; } .pos_1{ position: fixed; } .pos_2{ position: static; } .pos_3{ position: relative; } .pos_4{ position: absolute; } </style> </head> <body> <div> <p style="background-color: violet"></p> <p class="pos_1"> position: fixed;<br> left: -15%; </p> </div> <div> <p style="background-color: violet"></p> <p class="pos_2"> position: static;<br> left: -15%; </p> </div> <div> <p style="background-color: violet"></p> <p class="pos_3"> position: relative;<br> left: -15%; </p> </div> <div> <p style="background-color: violet"></p> <p class="pos_4"> position: absolute;<br> left: -15%; </p> </div> </body> </html>
Пример №2