이 문서는 아직 자원 봉사자들이 한국어로 번역하지 않았습니다. 함께 해서 번역을 마치도록 도와 주세요!
Summary
The left
CSS property specifies part of the position of positioned elements.
For absolutely positioned elements (those with position
: absolute
or position: fixed
), it specifies the distance between the left margin edge of the element and the left edge of its containing block.
Initial value | auto |
---|---|
Applies to | positioned elements |
Inherited | no |
Percentages | refer to the width of the containing block |
Media | visual |
Computed value | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto |
Animatable | yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers. |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
/* <length> values */ left: 3px; left: 2.4em; /* <percentage>s of the width of the containing block */ left: 10%; /* Keyword values */ left: auto; /* Global values */ left: inherit; left: initial; left: unset;
Values
<length>
- Is a negative, null, or positive
<length>
that represents:- for absolutely positioned elements, the distance to the left edge of the containing block
- for relatively positioned elements, the offset that the element is moved left from its position in the normal flow if it wasn't positioned.
<percentage>
- Is a
<percentage>
of the containing block's width, used as described in the summary. auto
- Is a keyword that represents:
- for absolutely positioned elements, the position of the element based on the
right
property and treatwidth: auto
as a width based on the content. - for relatively positioned elements, the left offset of the element from its original position based on the
right
property, or ifright
is alsoauto
, do not offset it at all.
- for absolutely positioned elements, the position of the element based on the
Formal syntax
<length> | <percentage> | auto
Examples
CSS Content
#wrap { width: 700px; margin: 0 auto; background: #5C5C5C; } pre { white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word; } #example_1 { width: 200px; height: 200px; position: absolute; left: 20px; top: 20px; background-color: #D8F5FF; } #example_2 { width: 200px; height: 200px; position: relative; top: 0; right: 0; background-color: #C1FFDB; } #example_3 { width: 600px; height: 400px; position: relative; top: 20px; left: 20px; background-color: #FFD7C2; } #example_4 { width:200px; height:200px; position:absolute; bottom:10px; right:20px; background-color:#FFC7E4; }
HTML Content
<div id="wrap"> <div id="example_1"> <pre> position: absolute; left: 20px; top: 20px; </pre> <p>The only containing element for this div is the main window, so it positions itself in relation to it.</p> </div> <div id="example_2"> <pre> position: relative; top: 0; right: 0; </pre> <p>Relative position in relation to its siblings.</p> </div> <div id="example_3"> <pre> float: right; position: relative; top: 20px; left: 20px; </pre> <p>Relative to its sibling div above, but removed from flow of content.</p> <div id="example_4"> <pre> position: absolute; bottom: 10px; right: 20px; </pre> <p>Absolute position inside of a parent with relative position</p> </div> </div> </div>
Live sample
Specifications
Specification | Status | Comment |
---|---|---|
CSS Transitions The definition of 'left' in that specification. |
Working Draft | Defines left as animatable. |
CSS Level 2 (Revision 1) The definition of 'left' in that specification. |
Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1.7 or earlier) | 5.5 | 5.0 | 1.0 |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1) | 6.0 | 6.0 | 1.0 |
See also
문서 태그 및 공헌자
태그:
이 페이지의 공헌자:
Prinz_Rana,
Simplexible,
Sebastianz,
fscholz,
winniae,
Jeremie,
Nd60,
kevinwheeler,
btzy,
teoli,
kscarfone,
trevorh,
Zenorbi,
ethertank,
Sheppy,
FredB,
brianloveswords,
McGurk,
grendel,
minnow990,
thatryan,
Mgjbot,
BijuGC,
Waldo,
DBaron
최종 변경:
Prinz_Rana,