left 속성

left 속성은 요소의 왼쪽 가장자리 위치를 설정합니다. 속성 값은 픽셀, 인치, 포인트, 퍼센트 등 일반적으로 사용되는 크기 단위로 작성할 수 있습니다. 설정하는 값은 음수일 수도 있으며, 이 경우 요소들이 서로 겹쳐지게 됩니다. 좌표 계산은 보통 relative(상대 위치) 또는 absolute(절대 위치) 값을 취하는 position 속성에 의해 결정됩니다.

구문

css선택자 {
  left: 크기 또는 auto;
}

예시

자식 요소에 마우스를 올렸을 때 왼쪽 가장자리 위치를 25px로 설정해 봅시다:

html<div id="elem">
  <p></p>
</div>

css#elem {
  width: 400px;
  height: 300px;
  border: 1px solid black;
}
p {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-left: 50px;
}
p:hover {
  left: 25px;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

Результат:

예시

이번에는 마우스를 올렸을 때 자식 요소의 왼쪽 가장자리가 -50px에 위치하도록 해봅시다:

html<div id="elem">
  <p></p>
</div>

css#elem {
  width: 400px;
  height: 300px;
  border: 1px solid black;
}
p {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-left: 50px;
}
p:hover {
  left: -50px;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

Результат:

함께 보기