[CSS] Position

👀 CSS position

태그들의 위치를 결정하는 CSS position에 대해 알아보자.

✔ Static

모든 태그들의 default. 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓임

✔ Relative

static 위치에 대해서 relative하게 위치를 변경가능, 하지만 페이지 레이아웃에서 요소가 차지하는 공간은 static일때와 같고, 다른 요소에는 영향을 주지 않음 (표시되는 위치만 변경됨)

.a {
    position: relative;
    top: 5px;
    right: -5px;
    /*static 위치에 대해서 top 5px, right -5px 이동된 위치로 변경*/
}

✔ Absolute

부모 속성을 기준으로 움직이고 행동함. 다른 요소들은 절대적으로 배치된 요소가 존재하지 않는 것처럼 배치

.a {
    position: absolute;
    top: 0;
    right: 0;
    /*부모의 오른쪽 위 모서리로 변경*/
}

✔ Fixed

특정 위치에 해당 엘리먼트를 고정하고 싶을 때. 메뉴 또는 광고 등에 사용가능

.a {
    position: fixed;
    left: 0;
    /*왼쪽에 고정, 스크롤을 내려도 그대로*/
}

👍 참고 사이트

1. CSS 포지션(position)
2. position