revision:
- affects the horizontal position of a positioned element. This property has no effect on non-positioned elements.
If {position: absolute;} or {position: fixed;}} : the left property sets the left edge of an element to a unit to the left of the left edge of its nearest positioned ancestor.
If {position: relative;} : the left property sets the left edge of an element to a unit to the left/right of its normal position.
If {position: sticky;} : the left property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.
If {position: static;} : the left property has no effect.
Property values:
auto : the browser calculates the left edge position. This is default
length : sets the left edge position in px, cm, etc. Negative values are allowed.
% : sets the left edge position in % of containing element. Negative values are allowed.
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
<div> <div class="a">This div element has position: relative; <div class="b">This div element has position: absolute and left: auto.</div> <div class="c">This div element has position: absolute and is placed 18vw to the right of the LEFT edge of the containing positioned element.</div> </div> </div> <style> div.a {position: relative; width: 40vw; height: 15vw; border: 0.3vw solid red;} div.b {position: absolute; left: auto; width: 15vw; height: 10vw; border: 0.3vw solid blue;} div.c {position: absolute; left: 18vw; width: 20vw; height: 8vw; border: 0.33vw solid green;} </style>