Position과 Display

레이아웃 짤 때 자주 사용하는 position과 display

position 속성 - relative, absolute, fixed

d 출처 -CSS POSITION PROPERTY

relative

이 요소는 기본적으로 html문서의 기본 흐름에 영향을 받고 top, right, bottom 그리고 left의 값을 주면 이 흐름 안의 위치를 기준으로 이동하게 된다. 앞의 위치 이동값이 없다면 다른 요소들에게 아무런 영향을 끼치지 않는다.

z-index값이 auto가 아니면 이 값들은 새로운 The stacking context를 만들어낸다. **Stacking context에 대해서는 추후에 다시 정리하자.

absolute

이 값은 html의 기본 흐름을 없애고 다른 요소들과의 거리도 없애버린다. 이 값은 바로 위의 있는 div나 section등 위치를 기준으로 상대적인 x:0, y:0 값으로 재설정된다. Relative와 마찬가지로 top, right, bottom, and left을 이용해 위치값을 바꾸고 z-index값이 auto가 아니면 이 값들은 새로운 The stacking context를 만들어낸다. 이 값의 마진값은 다른 요소들의 마진값에 영향을 끼치지 않는다.

일반적인 사용예시는 로고, 아이콘 등의 위치를 잡기 위해 많이 쓰고, 이 요소들의 부모 블럭에게 position: relative을 준다.

left: 50%; margin-left: calc( - width/2);

로고, 그림 등을 어떤 블럭의 중심에 놓을때 자주 쓰는 패턴이다.

fixed

이 값은 html의 기본 흐름과 페이지 안의 다른 요소들과의 간격도 사라진다. absolute의 기본값이 parent된 블럭을 기준으로 재설정된다면 fixed는 viewport 기준으로 재설정된다.(하지만 parent가 된 블록의 transform, perspective, filter 값에는 영향을 받는다) 이 블록의 최종 위치는 top, right, bottom와 left에 의해 결정된다. 이 값을 항상 새로운 The stacking context를 만들어낸다.

네비게이션 혹은 parallax interaction 구현할때 자주 사용되는 요소이다.

inline, inline-block, 그리고 block

d 출처 -Lupita Code

inline

이 요소는 앞뒤로 줄바꿈을 만들지 않고 기본적인 흐름 속에서 다른 요소들과 같은 취급을 받는다.

글 사이에 display: inline인 div가 있어도 블럭을 줄바꿈이 없고 글의 line-spacing이나 line-height에 영향을 받게 된다.

inline-block

inline과 가장 큰 차이점은 inline-block은 width나 height의 영향을 받는다는 것과 margins/paddings의 값의 영향을 받는다.

block과의 다른점은 inline-block은 줄바꿈이 없다는 것이다.

block

이 값은 박스모델의 값을 따르게 만든다.