CSS 포지션(position) 속성

Position은 문서 내에서 위치를 설정해주는 속성입니다.

 

{Position의 종류}

• static : 기본값.
• relative : 요소의 본래 위치에서 상대적으로 배치.
• absolute : 절대배치(포함 블록의 네 변 기준). 브라우저의 왼쪽 상단 꼭지점에서 시작.
• fixed : 브라우저 스크린 기준으로 배치
• inherit : 부모의 속성값을 상속 받음. (요샌 잘 쓰지 않는)

 

 

1️⃣ static

가장 기본적인 정적 위치로 top, bottom, left, right의 영향을 받지 않습니다.

 

2️⃣ relative

상대 위치로 기준을 잡아줄때 주로 쓰입니다.

부모에 relative를 걸어주고 자식에게 absolute를 걸어서 위치 조정.

 

 

 

 

 

 

 

3️⃣ absolute

절대 위치로 relative가 걸린 요소를 기준으로 위치가 설정됩니다.

 

 

 

 

 

 

4️⃣ fixed

웹 페이지를 기준으로 배치하여 스크롤 되어도 항상 같은 곳에 위치합니다.

그렇기 때문에 모달창을 띄울 때 position:fixed를 꼭 걸어줍니다.

 

 

 

 

 

 

 

5️⃣ 결과