[CSS] Position 핵심정리

.something {
	position: static;
}

브라우저 상 기본 세팅되어 있는 값으로, 쓸 필요 없는 값.

 

.something {
    position: relative;
    left: 100px;
}

위의 static(기본) 상태였다면 존재했어야 할 위치 기준으로 좌표값을 계산하여 이동시킴(top/bottom/left/right)

해당 태그의 부모에도 relative가 할당되어있어야 하며, 그렇지 않을 경우에는 body 기준으로 움직임.

여기서는 왼쪽으로부터 100px만큼 더 떨어뜨림으로써 margin-left: 100px와 동일한 효과를 준다.

만약 이동하면서 다른 구성요소와 겹친다 해도 그걸 밀어내지 않고 그 위로 가려버림.

 

.something {
    position: absolute;
    left: 100px;
}

class="something"을 속성으로 가지고 있는 html 태그의 부모를 기준으로 좌표값을 계산하여 이동시킴.

여기서는 부모에서부터 왼쪽으로 100px만큼 이동한다.

이동 후에 다른 구성요소들은 그 빈자리를 메꾸려고 따라 이동함.

 

.something {
    position: fixed;
    top: 0;
    left: 100px;
}

화면을 스크롤해도 해당 좌표만큼 떨어진 거리를 유지한다.

Navigation Bar나 Side Bar에 사용한다.