absolute를 쓸 때 주의할 점

absolute를 쓸 일이 종종 생긴다.

absolute를 쓰기위해서 알아야 하는 속성들이 몇가지가 있는데,

 

box-sizing

position 

zindex 

 

정도가 있다. 

 

* absolute의 기본특성

- absolute로 설정된 요소는 일반적인 문서 흐름에서 제거된다. 즉, 다른 요소들이 이 요소의 위치를 고려하지 않고 배치된다.

- absolute로 설정된 요소는 가장 가까운 relative, absolute, fixed, sticky로 설정된 부모 요소를 기준으로 위치가 설정된다. 만약에 그러한 부모 요소가 없다면, body를 기준으로 삼는다.

 

* absolute를 쓸 때

- 보통 부모요소에 position 에 relative 속성을 준다. 

    ㄴ relative 속성은 요소를 문서의 흐름에 맞춰서 배치해주고, 다른 요소에 배치에 영향을 주지 않는다.

    ㄴ 자신의 원래 위치를 기준으로 top, bottom, left, right으로 상대적으로 이동시킬 수 있다.

 

*box-sizing

- css에서 요소의 크기를 계산하는 방법을 지정하는 속성이다.

- default로는 요소의 크기는 너비와 높이만을 포함한다. 마진과 패딩은 포함되지 않는다. ( content-box )

- 개발 시에는 border-box로 설정을 많이 하는데, 이 경우에는 너비와 높이에 콘텐츠, 패딩, 테두리가 모두 포함되고

요소의 총 크기가 설정한 너비와 높이를 넘지 않아서 제어하기 편하다.