[CSS] Position

박우현·2020년 12월 19일

👌 CSS position

태그들의 위치를 결정하는 CSS

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

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

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

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

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

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

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