Position the left edge of an element relative to its normal position (relative positioning) or relative to the left edge of its container (absolute or fixed positioning)
Syntax
left: length | percentage | auto | inherit ;
length - A positive number will move the element to the right, a negative number left.
percentage - Set the left edge as a percentage of the containing element. Negative values are allowed
auto - Let the user agent (web browser) calculate the left edge position.
inherit - inherit from the parent element.
An alternative (CSS3 only) is to use transform translate() that will "nudge" the element from it's current position which is perfect for moving an item; adding motion; rather than setting its initial position.
Examples:
h1 { position: relative; left: 25px; }
.emw3class { position: absolute; left: -2em; }
#emw3id { position: relative; left: 25pt; }
Try it:
This is a sample of text with a CSS border. The border helps to display the position of the text DIV. |
Browser Support: CSS 2 supported in all major browsers.
“Happiness makes up in height what it lacks in length” ~ Robert Frost
Related:
bottom - Bottom position of a positioned element.
top - Top position of a positioned element.
right - Right position of a positioned element.
transform translate(), translateX(), translateY() - Apply a 2D or 3D transformation to an element. CSS3
position - Positioning method for an element (static, relative, absolute or fixed).