left
Specifies the distance from the left edge of the reference position. The 'left' property only takes effect when the 'position' property is set to a value other than 'static'.
Sample Code
div.test { left: auto;}
div.test1 { left: 50px;}
div.test2 { left: 10%;}
Available Values
| Value | Description |
|---|---|
| auto | Positions the element based on the value calculated from the 'right' property. If the 'right' property is also 'auto', no positional shift occurs. This is the initial value. |
| number | Specifies a numeric value. When the 'position' property is 'relative', this is the distance from the element's natural position in the document flow. When 'absolute', it is the distance from the left edge of the containing block. Units such as 'px' and '%' are supported. With '%', the value is relative to the containing block's width. |
Browser Display Result
The div elements with 'left' below are placed inside a div with 'position: relative' (red border), which serves as the reference.
<div style="position: relative; border: solid 1px #f00; width: 300px; margin: 50px auto;"> <div style="left: 50px; position: relative; background-color: #ff0; width: 300px; height: 300px; opacity: 0.7;">This is a 300px×300px div with 'left: 50px' and 'position: relative'.</div> </div>
<div style="position: relative; border: solid 1px #f00; width: 300px; margin: 50px auto;"> <div style="left: 50px; position: absolute; background-color: #ff0; width: 300px; height: 300px; opacity: 0.7;">This is a 300px×300px div with 'left: 50px' and 'position: absolute'. The parent's height becomes 0 since it cannot compute this element's height.</div> </div>
Browser Compatibility
Chrome1+ ○
Firefox1+ ○
Safari1+ ○
Edge12+ ○
IE11 ○10 ○9 ○
8 ○7 ○
6 ○
Opera5+ ○
4 and earlier ×
iOS Safari1+ ○
Android Browser4.4+ ○3 and earlier × Chrome AndroidLatest ○ Firefox AndroidLatest ○※ Version data is based on MDN.
Details
Specifies the distance from the left edge of the reference position. The 'left' property only takes effect when the 'position' property is set to a value other than 'static'.
The reference position changes depending on whether the 'position' property is set to 'relative' or to 'absolute'/'fixed'.
With 'position: relative', the 'left' value is the distance from where the element would normally be placed in the document flow.
With 'position: absolute' or 'fixed', the 'left' value is the distance from the left edge of the containing block.
When set to 'auto', the remaining horizontal distance is calculated from the 'right' property's value. If both 'left' and 'right' are 'auto', no position change occurs. 'auto' is the initial value.
Note that 'top' and 'bottom' both apply to the y-axis, while 'left' and 'right' apply to the x-axis. You don't need to specify both in the same direction. If you do, 'top' and 'left' take priority.
If you find any errors or copyright issues, please contact us.
シェアする