CSS Layout - The position Property

position 속성은 요소의 위치 지정 방식의 유형(static, relative, fixed, absolute, sticky)을 지정한다.

position:static;

HTML 요소는 기본적으로 static 포지션이다. position:static;인 요소는 top, bottom, left, right 속성에 영향을 받지 않는다.

div.static {
    position: static;
    border: 3px solid #73AD21;
}

position:relative;

normal 포지션에 상대적으로 위치한다.

top, bottom, left, right 속성을 지정하면 normal 포지션으로부터 벗어나 수정된다.

div.relative {
    position: relative;
    left: 30px;
    border: 3px solid #73AD21;
}

position:fixed;

viewport에 대해 상대적으로 위치한다. 페이지가 스크롤되는 것에 상관 없이 같은 곳에 머무른다.

오른쪽 공간이 0, 바닥이 0이므로 오른쪽 바닥에 요소가 고정된다.

div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
}

position:absolute;

가장 가까운 position된 조상에 상대적으로 위치한다. 만약 조상이 position되어 있지 않다면 문서의 body를 조상으로 삼고 스크롤하는 동안 움직인다.

position됐다는 것은 static은 해당되지 않는다.

absolute 클래스가 relative 클래스 안에 들어 있는 상태에서 absolute는 relative에 대해 top은 80만큼 떨어져있고 right는 딱 붙는다.

div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
} 

div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}

position:sticky;

사용자 스크롤 위치에 기반해서 위치한다.

스크롤 위치에 따라 relative와 fixed는 번갈아가면서 위치한다. offset을 만나기 전까지는 relative 상태이고 offset을 만나면 fixed가 된다.

예시를 봐야 이해가 잘 된다..

Overlapping Elements

요소가 positioned 될 때 다른 요소들과 중첩될 수 있다.

z-index 속성을 요소의 쌓이는 순서를 지정한다. 요소는 음, 양 순서를 가진다.

예시

z-index 값이 큰 요소는 항상 z-index 값이 낮은 요소보다 앞에 놓인다.

z-index가 지정되지 않은 두개의 positioned 요소가 있다면 HTML 코드 상의 나중에 위치한 요소가 앞에 출력된다.

이미지 안에 글자 위치시키기

https://www.w3schools.com/css/css_positioning.asp