[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 속성의 예

 

사용 예

See the Pen Understanding CSS positioning by Chen Hui Jing (@huijing) on CodePen.

 

 

 

참고 사이트

position - CSS: Cascading Style Sheets | MDN

Understanding positioning in CSS