CSS 왼쪽 속성

예시

위치가 지정된 <div> 요소의 왼쪽 가장자리를 가장 가까운 위치에 있는 조상의 왼쪽 가장자리에서 150px로 설정합니다.

div.c {
position: absolute;
left: 150px;
width: 200px;
height: 120px;
border: 3px solid green;
}

아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.

정의 및 사용

속성 은 left배치된 요소의 수평 위치에 영향을 줍니다. 이 속성은 위치가 지정되지 않은 요소에는 영향을 미치지 않습니다.

위치인 경우: 절대; 또는 위치: 고정; - left속성은 요소의 왼쪽 가장자리를 가장 가까운 위치에 있는 조상의 왼쪽 가장자리 왼쪽에 있는 단위로 설정합니다.
위치인 경우: 상대; - left 속성은 요소의 왼쪽 가장자리를 정상 위치의 왼쪽/오른쪽 단위로 설정합니다.
위치인 경우: 끈적임; - left속성은 요소가 뷰포트 내부에 있을 때 위치가 상대적인 것처럼 동작하고 외부에 있을 때 위치가 고정된 것처럼 작동합니다.
위치: 정적; - left속성은 효과가 없습니다.

기본값:	자동
상속:	아니요
애니메이션 가능:	예. 애니메이션 가능 에 대해 읽기
버전:	CSS2
자바스크립트 구문:	개체 .style.left="100px"

브라우저 지원

표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

Property
left	1.0	5.5	1.0	1.0	5.0

CSS 구문

left: auto|length|initial|inherit;

속성 값

Value	Description	Play it
auto	Lets the browser calculate the left edge position. This is default
length	Sets the left edge position in px, cm, etc. Negative values are allowed. Read about length units
%	Sets the left edge position in % of containing element. Negative values are allowed
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

더 많은 예

예시

음수 값과 위치 지정 조상이 없는 요소에 대해 left 속성을 사용합니다.

div.b {
position: absolute;
left: -10px;
width: 100px;
height: 120px;
border: 3px solid blue;
}

div.c {
position: absolute;
left: 150px;
width: 200px;
height: 120px;
border: 3px solid green;
}

CSS 참조

CSS Properties