Position : Relative/Absolute/Fixed

Position에는 static, fixed, relative, absolute가 들어갈 수 있다

Position: fixed

현 위치에 무조건 고정이 된다

Position : absolute

display가 inline-block으로 바뀜

inline-block에서는 width와 height가 없으므로 설정 해 줘야한다

absolute를 주면 부모의 height가 사라짐(부모에게 height 값이 설정 되어 있지 않으면 자식의 크기에 따라 유동적으로 변함) -> 부모에게 height를 선언해주거나 overflow: hidden을 줘서 height를 다시 살려 줌

 

Position: relative

absolute를 위해서 존재한다. absolute의 부모로 보면 된다

absolute 선언 된 element가 relative를 기준으로 움직인다

Tip

같은 Position 속성이 있으면 나중에 선언된 element가 위로 보인다.

조작할려면 z-index 사용