Position

●Positioning

 ▷요소가 위치를 결정하는 방식

 ▷position : [static/relative/fixed/absolute]

 ▷top/bottom, right/left 속성을 통해 위치를 조정 가능

 

○Static Position (static)

 ▷기본으로, HTML의 흐름에 따라 위치시킴.

 ▷left, right, top, bottom의 속성값에 영향을 받지 않음.

 

○Relative Position (relative)

 ▷개체의 위치를 상대 위치(HTML요소의 기본 위치)로 지정함.

 ▷HTML 문서에 나타나는 순서를 거의 해치지 않음.

 

○Fixed Position (fixed)

 ▷개체의 위치를 고정 위치(뷰포트를 기준)로 지정함.

 ▷웹 페이지가 스크롤 되어도 항상 같은 곳에 위치함.

 

○Absolute Position (absolute)

 ▷개체의 위치를 절대 위치(위치가 설정된 상위 요소를 기준, 상위 요소가 없으면 body)로 지정함.

 ▷보통은 HTML문서에 나타나는 순서대로 나타나지만, 절대 위치를 지정하면 무시함.

 

 

 

○z-index

 ▷z값을 부여하여 요소의 우선순위를 부여함.

 ▷z-index값이 높을수록 앞쪽에 위치함.