위치 속성 (position)

https://developer.mozilla.org/ko/docs/Web/CSS/position

 

예제를 위해 공통으로 사용할 html, css 는 다음과 같다.

<section>
    <div></div>
    <div id="middle"></div>
    <div></div>
</section>

div {
    width: 100px;
    height: 100px;
    background-color: beige;
    border: 2px solid black;
    margin: 10px;
    display: inline-block;
}


#middle {
    background-color: green;
}

------------------------------------------------------------------------

static

• 일반적인 문서 흐름에 따라 배치함.
• top, right, bottom, left 속성이 아무런 영향을 주지 못한다. default 로 설정되는 값임.
• 아래 예제는 top 을 설정했지만, 아무런 영향을 받지 않는다.

section #middle {
    position: static;
    top: 100px;
}

 

------------------------------------------------------------------------

relative

• 일반적인 문서 흐름에 따라 배치함.
• 원래 있어야 할 위치를 기준으로 top, right, bottom, left의 값을 적용함.

section #middle {
    position: relative;
    top: 100px;
    left: 100px;
}

 

 

------------------------------------------------------------------------

absolute

• 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다.
• 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 top, right, bottom, left  를 적용해 배치한다.

예제1

section #middle {
    position: absolute;
    top: 100px;
    left: 100px;
}

 

예제2

#middle 의 부모 요소인 section 에 position 값을 지정하면, #middle 의 position:absolute 는 section 의 위치를 기준으로 top, right, bottom, left  를 적용한다.

section {
    position: relative;
}

section #middle {
    position: absolute;
    top: 100px;
    left: 100px;
}

 

------------------------------------------------------------------------

fixed

• 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다.
•  뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치한다. 
• 스크롤을 해도 화면상에서 고정된 위치를 유지한다.

section #middle {
    position: fixed;
    top: 100px;
    left: 100px;
}

 

------------------------------------------------------------------------

sticky

• 일반적인 문서 흐름에 따라 배치함.
• 처음에는 원래 흐름 위치에 있지만, 스크롤을 하더라도 고정된 위치를 유지한다.
•  컨테이닝 블록(가장 가까운 블록 레벨 조상) 을 기준으로 top, right, bottom, left의 값을 적용한다.

 

주의

top, right, bottom, left 가 영향 받는 것을 margin, padding 등이 영향 받는 것과 헷갈리지 말라.

참고: https://wefree.tistory.com/358