Coding/HTML CSS
position 속성 - relative, absolute, fixed
하상원이야
2022. 5. 24. 16:44
기본 값 : static -> 문서 흐름에 맞춰 배치 / 조정 불가능~
relative : 원래의 위치부터 계산하여 배치
absolute : 원래 위치와 별개로 부모 요소 기준으로 계산하여 배치
fixed : 부모 요소와 관계 없이, 브라우저 화면의 상대 위치를 기준으로 계산하여 배치
부모요소인 회색 박스 안에서 각각 relative / absolute / fixed를
right : 10px ; bottom : 10px ; 를 하여 나타내보았다

1. relative는 원래 위치인 왼쪽 끝에서 오른쪽과 아래쪽으로 10px씩 밀려서 이동했다
2. absolute는 부모 요소인 회색박스에서 오른쪽과 아래쪽 10px씩 이동한 위치에서 나타났다
( 주의 : 부모 position이 relative가 아니라면 부모 요소를 무시하고 나가버림 )
3. fixed는 전체 화면에서 오른쪽과 아래쪽 10px씩 이동한 위치에서 나타났다
참으로 다양한 position 의 속성이라고 볼 수 있다 ~!
반응형