position 속성 - relative, absolute, fixed 에 대해 알아봅시다.

목차

▼ relative

▼ absolute

▼ fixed

1. position-relative

태그의 위치를 변경 시키고 싶을때 이용하며 top, right, bottom, left에 값을 주며 이동시킬 수 있습니다. relative, absolute를 이용하면 relative를 부모로 합니다.

box1 {
	position:relative;
}

.colorbox2 {
	position:absolute;
   left: 40px;
}

2.position-absolute

절대 좌표와 함께 위치를 지정해 줄 수 있습니다.

3.position-fixed

fixed(고정 위치)
부모 요소와 관계 없이 브라우저의 viewport를 기준으로 좌표 속성(top, bottom, left, right)을 사용하여 위치를 이동시킵니다.

스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳(브라우저 창에서 보이는 부분 = viewport)에 위치합니다.

fixed 속성 선언 시, block 요소의 width는 inline 요소와 같이 content에 맞게 변화되므로 적절한 width를 지정해야 합니다.

''스크롤해도 '문의하기'박스는 가만히 있는다''