TIL 03. position 속성 - relative, absolute, fixed

Position in CSS

태그들의 위치를 결정하는것을 Position 이라고 한다.
기본적으로 아무런 Position 설정이 없으면 static으로 설정된다.

Relative

태그의 위치를 조금 변경하고 싶을때 사용한다.
주로 top, bottom, left, right 을 사용한다.

.relative{
    top: 15px;
    right: 5px;
}

Relative 으로 적힌 클래스는 위로 15px, 오른쪽으로 5px 이동 하였을것이다.

Absolute

이 경우 기준을 맞추게 될 부모에게 position 속성 relative을 부여한다

<div class = "relative"> 
    <p class = "absolute"></p>
</div>

HTML에 Relative Class 안에 Absolute Class를 만들었다.

.relative{
width: 200px;
height: 200px;
position: relative;
}

.absolute{
width: 50px;
height: 50px;
position: absolute;
left: 
top:
}

CSS에 위와 같이 지정을 하면 자식 클래스인 Absolute는 부모 클래스인 Relative가 지정한 width 200px, height 200px 내에서만 움직일수 있다. 따라서 Absolute는 width 50px, height 50px를 움직이고 있다.
또한 자식은 부모를 중심으로 움직인다. 따라서 Absolute는 Relative으로부터 width height 모두 50px 만큼 떨어져 있다.

Fixed

영어의 뜻 그대로 고정된 위치를 뜻한다.
스크롤을 해서 페이지를 내려봐도 해당 태그는 고정되어있을 것이다.

.fixed{
position: fixed;
top: 15px;
left: 5px;
}

Fixed 클래스 위치는 위에서 15px, 왼쪽에서 5px 떨어져 있는 위치에 고정된다. 역시 스크롤을 위아래로 해도 고정되어 있다.