상대위치 , 절대위치

CSS에서 위치 속성은 웹 페이지에서 element의 레이아웃과 위치를 제어하는 데 사용된다. 위치 속성은 다음 네 가지 가능한 값 중 하나를 가질 수 있다:

static: 기본값이며, 문서의 정상적인 흐름에 따라 element가 배치됨을 의미한다.
relative: element는 정상 위치에 상대적으로 배치되며, 위쪽, 오른쪽, 아래쪽 및 왼쪽 특성을 사용하여 위치를 조정할 수 있습다.

[Example]
element는 20px 오른쪽으로 이동하고 10px 정상 위치에서 아래로 이동한다.

p {
    position: relative;
    left: 20px;
    top: 10px;
}

absolute: element는 가장 가까운 위치에 있는 상위 항목에 상대적으로 배치되지만(고정된 것처럼 뷰포트에 상대적으로 배치되는 대신) 위쪽, 오른쪽, 아래쪽 및 왼쪽 특성을 사용하여 위치를 조정할 수 있다.

[Example]
element는 20px 오른쪽으로 이동하고 element 10px 가장 가까운 위치에 있는 상위 element에서 아래로 이동한다.

p {
    position: absolute;
    left: 20px;
    top: 10px;
}

fixed: element는 뷰포트에 상대적으로 배치되며 페이지를 스크롤하더라도 동일한 위치에 유지된다.

[Example]
element는 20px 오른쪽으로 이동하고 뷰포트에서 10px 아래로 이동하며 페이지를 스크롤하더라도 동일한 위치를 유지한다.

p {
    position: fixed;
    left: 20px;
    top: 10px;
}

위치 속성을 사용할 때는 z-index 속성을 사용하여 element의 쌓기 순서를 제어할 수 있다. z 인덱스가 높은 element는 z 인덱스가 낮은 element 앞에 나타난다.

[Example]
<p> element가 z-index 1로 절대적으로 위치하도록 만들 것이고, 그것은 더 낮은 z-index를 가진 다른 element들 위에 나타날 것이다.

p {
    position: absolute;
    z-index: 1;
}

element의 위치 지정 컨텍스트는 정적 이외의 위치 값을 가진 가장 가까운 상위 element이다. 또한 element가 특정 임계값에 도달할 때까지 위치: 고정된 위치: 위치와 같은 역할을 수행할 수 있는 위치: 고정을 사용할 수 있다.