1. Position
css에 position를 사용하면, html이 작성된 순서와 상관없이 그리고 원하는 곳에 요소를 배치할 수 있다.
position에 사용하는 값(value)은 아래 4개가 있다.
- position: static;
- position: relative;
- position: absolute;
- position: fixed;
1-1 Relative
relative 자체로는 변화가 없지만, 위치를 이동시켜주는 top, right, bottom, left 프로퍼티를 활용하여 위치를 이동시킬 수 있다.
top, right, bottom, left은 position이라는 프로퍼티가 있을 때만 적용되는 프로퍼티!
프로퍼티 top: 5px;을 적용하면 위로 이동하는 것이 아니라 아래로 이동하게 된다.(top에서 5px만큼 밀려난다고 생각하면 편함) 바깥쪽으로 이동하게 하고 싶으면 5px 대신 -5px를 적용하면 된다.
1-2 Absolute
relative가 static인 상태를 기준으로 주어진 픽셀만큼 움직였다면, absolute는 position: static 속성을 가지고 있지 않은 부모 즉, 부모 중에 포지션이 relative, absolute, fixed 일 때 적용가능하다. 만약 이 포지션을 가진 부모 태그가 없다면 가장 위의 태그(body)가 기준이 된다. 부모를 기준으로 이동하게 된다.
<!-- 생략 --> <style> #absolute { background: yellow; position: absolute; right: 0; } #parent { position: relative; width: 100px; height: 100px; background: skyblue; } #child { position: absolute; right: 0; } </style> <body> <div> <div id="absolute">absolute</div> </div> <div id="parent"> <div id="child">children</div> </div> </body> <!-- 생략 -->
위의 예시 코드를 출력해 보면, #absolute는 부모 태그 중 postion: relative인 것이 없기 때문에 body를 기준으로 가장 오른쪽에 붙게된다. 반면 #child는 부모 태그인 #parent가 position: relative이기 때문에 그것을 기준으로 가장 오른쪽에 붙는다.
*참고로 absolute가 되면 div여도 더는 width: 100%가 아님!
1-3 Fixed
fixed는 말 그대로 위치를 고정시켜 놓는 positon의 값이다. 때문에 absolute처럼 부모 태그가 relative같은 포지션이 정해져 있지 않아도 상관 없다. 대신 absolute처럼 div여도 더는 width: 100%가 아니게 된다.
