[CSS] positon 속성 (static, relative, absolute, fixed, sticky)

CSS positon 속성 (static, relative, absolute, fixed, sticky)

들어가며

• CSS의 position 속성에 대하여 정리해본다.

 

position 속성

용도

• 문서 상에 요소(Element)를 배치하는 방법을 지정한다.
• top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정한다.

 

속성값

static

• 요소를 일반적인 문서 흐름에 따라 배치한다.
• 이 속성값을 사용하면 top, right, bottom, left, z-index 속성을 사용할 수 없다.
• 기본값이며, 따로 지정하지 않아도 된다.

 

relative

• 일반적인 문서 흐름에 따라 배치되지만, top, right, bottom, left 속성을 사용하여 위치를 상대적으로 조절할 수 있다.
• 상대 위치 조절 후에도 요소가 다른 요소들과 공간을 유지하며 그 자리를 유지한다.

 

absolute

• absolute 값이 지정된 요소는 가장 가까운 상위(부모 또는 조상) 요소 중 하나에 relative, absolute, 또는 fixed 값이 지정된 요소에 상대적으로 배치된다.
• 이렇게 배치된 요소는 문서 흐름에서 제거되며, 다른 요소들과 겹칠 수 있다.
• top, right, bottom, left 속성을 사용하여 위치를 조절할 수 있다.

			
			
			
		
<div class="parent">
    <div class="child"></div>
</div>
 
<style>
    .parent {
        position: relative | absolute | fixed;
    }
 
    .child {
        position: absolute;
    }
</style>

 

fixed

• fixed 값이 지정된 요소는 뷰포트(브라우저 창)에 상대적으로 배치되며, 스크롤해도 화면 상에 고정된다.
• top, right, bottom, left 속성을 사용하여 위치를 조절할 수 있다.

 

stickey

• 요소를 일반적인 문서 흐름에서 배치하되, 스크롤되는 동안 특정 위치에서 고정하는 데 사용된다.
• 웹 페이지의 스크롤 효과를 만들거나 특정 요소를 헤더나 사이드바와 같은 위치에 고정하는 데 유용하다.

position 속성의 예

 

사용 예

 

 

 

참고 사이트

position - CSS: Cascading Style Sheets | MDN

Understanding positioning in CSS