HTML CSS 에서 position 속성의 이해 > 개발

• 목록

• 페이스북 공유
• 트위터 공유

position:static
- default 값
- block 요소와 inline 요소들이 각자의 속성대로 쌓인다.

position:relative
- static 이었을 때를 기준으로 top, left, right, bottom 픽셀만큼 이동한다.

position:absolute
- relative 속성을 가지고 있는 부모를 기준으로 픽셀만큼 이동한다.
- 부모중에 relative 가 없으면, body 가 기준이 된다.
- 재미있는 것은, 이동 픽셀값을 주지 않으면, 현재의 자기 위치에 고정된다.

참고로,
absolute 속성에서 이동 픽셀값을 주지 않으면, 현재의 자기 위치에 고정이 되는데..
이 경우, 다음에 오는 요소들은 이 요소의 칸을 무시하고 자기 속성대로 쌓인다.


* 참고
https://www.w3schools.com/cssref/playit.asp?filename=playcss_position&preval=initial
https://www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1

추천0