[css] position

0

position: 관련 속성 중 자주 쓰이는 것 3가지는

absolute, relative, fixed 라고 한다.

그 중 fixed는 이해가 어려운 편은 아닌 것 같다. 뷰포트, 즉 전체 스크린에서 절대적인 위치에 요소를 고정해놓는 개념으로, 스크롤을 해도 요소의 위치는 바뀌지 않는 다는 것. 그래서 플로팅 버튼 개념으로도 쓸 수 있는 유용한 속성인 것 같다.

자, 여기서 헷갈리는 absolute 과 relative.
분명 absolute이면 절대적인 위치를 고수 할 것 같은 데, 뜻과 다르게 내포되어 있는 속임수가 있다. absolute의 활동 반경이 부모 요소에 종속되어 있다는 것. 즉 부모 요소의 너비가 100px면 absolute인 자식은 그 안에서 놀아야한다는 제한점이 있다.
부모요소가 없다면 뭐 body 같은 것이 부모가 되지 않을까?
뭐가 됐던지간에 내 품안의 자식요소를 만드려면 일단 부모요소가 position: relative 또는 fixed가 되야 한다고 한다. 조금 더 공부를 해봐야겠다.

반면 relative는 단순이 원래 해당 요소가 있어야할 자리를 기준으로 위치가 변경된다는 개념이다. 오히려 더 단순하다는 느낌이 드는 건 함정인가?

profile
내가 기억하려고 작성 중인 블로그

0개의 댓글