css-position

웹 페이지를 아름답게 하는 레이아웃

먼저 position 이다.

position : static, relative, fixed

1. position: static;

   • position의 기본값. 위치가 지정되어 있지 않음

2. position: relative;

   • 별도의 위치 속성이 없다면, static처럼 있지만, 위치를 이동해주는 top/right/bottom/left 속성을 사용하면 위치가 상대적으로 조정됨
   • 자기 자신을 기준으로 떨어진 지점에 위치를 지정할 수 있다.

3. position: fixed;

   • 브라우저 창을 기준으로 위치를 지정함. 부모 요소의 위치와 무관하며, 스크롤의 영향을 받지 않고, 위치가 고정됨.
   • 속성으로 top/right/bottom/left를 사용하여 위치를 지정함.

4. position: absolute;

   • 부모 요소의 위치를 기준으로 위치를 지정.
   • 속성으로 top/right/bottom/left를 사용하여 위치를 지정함.
     *부모 요소는 반드시 relative이어야 한다.
   • 만약, 부모 요소가 static이면 다른 상위요소를 찾고, 해당하는 상위 요소가 하나도 없다면, body를 기준으로 위치가 지정된다.
     -> 자식이 absolute가 되면, 부모와의 링크가 끊기면서, 부모와 무관해지므로 부모의 크기를 따라가지 않게 되어 자신의 content 만큼의 크기만 갖게 된다.

예시)

검색창 안에 3가지 아이콘(자식)이 들어가 있는데, 검색창(부모) 좌측 하단에 나란히 모여서 절대 안으로 들어가지 않던 아이콘들이 relatve와 absolute > 위치속성으로 움직였다,,,(하지만 좀더 정확하게 위치 할 수 있게 하는 방법이 있을 것 같은데,,,)