Позиционирование слева
Свойство left устанавливает дистанцию позиционирования элемента слева. Свойство position работает в паре со свойством left и с его параметрами задающими расстояние.
left: 20px;
left: 30%;
left: auto;
left: inherit;
Ниже в окне браузера изображён элемент с фоном жёлтого цвета. Этот блок с классом container содержит внутри себя ещё один элемент с селектором box. Для блока container задано свойство top со значением 50 пикселей, высота и длинна по 200 пикселей, указан размер шрифта, свойство margin со значениями auto справа и слева выравнивающие блок по центру и ноль сверху и снизу, position со значением relative, а так же цвет фона.
Для элемента box задано расстояние слева 20 пикселей и расстояние снизу 70 пикселей. Этому блоку задано абсолютное позиционирование absolute. Так же здесь задан цвет текста white, межстрочный интервал 60 пикселей и ширина с этим же значением, текст по центру и цвет фона #C60.
HTML
<div class="container">
<div class="box">
left
</div>
</div>
CSS
.container{
width: 200px;
height: 200px;
font-size: 16px;
margin: 0px auto;
position: relative;
background-color: #fc0;
}
.box{
left: 20px;
bottom: 70px;
width: 60px;
color: white;
line-height: 60px;
position: absolute;
text-align: center;
background-color: #C60;
}