position 속성

원하는 위치에 요소를 배치할 수 있다.

static

position: static;

• 기본값(default)
• 위치를 지정하지 않을 때 사용

relative

position: relative;
top: 40px;
left: 40px;

• 요소가 차지하는 공간은 static일 때와 동일
• 자기 자신을 기준으로 top, right, bottom, left 값에 따라 이동

  top: 위에서 부터 int값 만큼 이동
  right: 오른쪽에서부터 int값 만큼 이동
  bottom: 아래서부터 int값 만큼 이동
  left: 왼쪽에서부터 int값 만큼 이동

  음수일 경우 양수의 반대방향으로 이동한다.

absolute

position: absolute;
top: 40px;
left: 40px;

• 위치를 지정할 수 있으며, 가까운 부모 요소를 기준으로 위치가 결정
• position의 relative, fixed, absolute이 부모요소가 될 수 있음
• 일반적으로 기준이 될 부모에게 relative 부여
• top, right, bottom, left 값으로 이동(이동값은 relative와 동일)

fixed

position: fixed;
right: 0;
bottom: 0;

• 부모요소 상관없이 고정된 위치 설정
• 브라우저 화면의 상대 위치를 기준으로 위치가 설정됨
• top, right, bottom, left 값으로 이동(이동값은 위와 동일)

sticky

position: -webkit-sticky;
position: sticky;
top: 20px;

• static의 흐름과 같지만 스크롤의 위치가 설정값에 이르면 fixed와 같이 박스를 화면에 고정시킴

float

• 특정요소를 어떻게 띄울 것인지 나타내는 것
• 페이지 레이아웃을 구성할 수 있으며 이미지를 좌, 우로 정렬할 수 있음

float: left;
//좌측에 정렬
float: right;
//우측에 정렬
float: none;
//정렬하지 않음