[CSS] 포지션(position)

포지션(position)

  - HTML요소가 위치를 결정하는 방식으로, 네가지가 있다.

    1. 정적 위치(static position) 지정 방식

    2. 상대 위치(relative position) 지정 방식

    3. 고정 위치(fixed position) 지정 방식

    4. 절대 위치(absolute position) 지정 방식

 

• 정적 위치(static position)

       - HTML 요소의 위치를 결정하는 가장 기본적인 방식

       - position 속성값이 static으로 설정된 요소는 top, right, bottom, left 속성값에 영향을 받지 않는다

       - 웹 페이지의 흐름에 따라 차례대로 요소를 위치시키는 단순한 방식

<style>
    div { position: static; }
</style>

 

• 상대 위치(relative position)

       - 해당 HTML 요소의 기본 위치를 기준으로 위치 설정

<style>
    div.relative { position: relative; left: 30px; }
</style>

 

• 고정 위치(fixed position)

       - 뷰포트(viewport)를 기준으로 기준으로 위치 설정

       - 스크롤하더라도 고정으로 지정된 요소는 항상 같은 곳에 위치한다.

<style>
    div.fixed { position: fixed; top: 0; right: 0; }
</style>

 

• 절대 위치(absolute position)

       - 이미 위치가 설정된 요소(relative, fixed, absolute)를 기준으로 위치를 설정

       - 혹은 body 기준으로 위치를 설정

<style>
    div.absolute { position: absolute; top: 50px; right: 0; }
</style>

 

 

정적 위치(static position)와 다른 방식들

 - 정적 위치 지정 방식을 제외한 나머지 다른 방식(relative, fixed, absolute)들은 어떤 기준에 대해서 상대적인 위치를

    설정하는 방식

- 상대 위치(relative position) : 해당 요소가 정적 위치 지정 방식일 때의 위치에 상대적으로 위치

- 고정 위치(fixed position) : 뷰포트에 상대적으로 위치

- 절대 위치(absolute position) : 위치가 설정된 바로 상위의 조상요소에 상대적으로 위치

<style>
    .static { position: static; }
    .relative { position: relative; }
    .fixed { position: fixed; }
    .absolute { position: absolute; }
</style>