(CSS) postion 속성 (feat. static, relative, absolute, fixed)

"다시 공부하는 CSS"

 

postion 속성

 

static : postion 속성을 부여하지 않았을 때 가지는 기본값

 

relative : 현재 위치에서 상대적인 offset 속성을 줄 수 있음

 

absolute : 부모 중 static이 아닌 요소의 위치를 기준으로 상대적인 offset 속성을 줄 수 있음.

부모 태그가 없는 경우에 특정 요소 postion에 absolute를 설정하면 브라우저 왼쪽 상단의 좌표가 0, 0이 된다.

부모 태그가 있는데 부모 position 속성의 값이 모두 static인 경우도 브라우저 왼쪽 상단의 좌표가 0, 0이 된다.

absolute 속성을 주는 순간 이 태그 요소는 다른 태그 요소들과는 완전히 다른 층으로 이동하였다. 3차원 좌표계에서 z축이 변경되었음

 

fixed : absolute 처럼 z축 속성이 변함. 브라우저를 기준으로 위치를 잡는다. 스크롤에 영향을 받지 않고 고정된 위치를 가짐

 

offset 속성 - 기준이 되는 곳으로 부터 얼만큼 떨어졌는지를 설정함

 

 

마진 겹침 현상(마진 상쇄) margin-collapsing) 해결 방법

• display: inline-block
• border 또는 padding 값을 줌(background-color는 해결안됨)
• postion 속성이 absolute 또는 fixed

 

참고자료

CSS 마진 상쇄(Margin-collapsing) 원리 완벽 이해

https://velog.io/@raram2/CSS-%EB%A7%88%EC%A7%84-%EC%83%81%EC%87%84Margin-collapsing-%EC%9B%90%EB%A6%AC-%EC%99%84%EB%B2%BD-%EC%9D%B4%ED%95%B4

 

css postion 속성과 relative, absolute, fixed, static 이해하기

https://thrillfighter.tistory.com/480