카테고리 없음
8-8-5. CSS 속성 : 레이아웃-포지션&옵셋(position&offset) {position: static / relative / absolute / fixed;}
김종원
2021. 9. 4. 01:48
8-8-5. CSS 속성 : 레이아웃-포지션&옵셋(position&offset)
가. position 속성
- 요소의 레이아웃을 설정하는 대표적인 속성
- position 속성은 요소를 원하는 위치로 이동할 수 있게 하는 속성
- positon 속성은 좌표 값인 offset 값과 같이 활용됨
- 기본값 : static
나. position 속성값의 종류
| 속성값 | 내용 |
| static | ㆍ블록레벨요소는 상하로, 인라인레벨요소는 좌우로 그 성질에 따라 배치되는 순서 (normal-flow)와 같이 흐름에 맞춰서 배치되며, offset 값이 적용되지 않음(기본값)  |
| relative | ㆍ해당 요소 자신이 원래 있어야 할 위치를 기준점으로, offset 값에 따라 위치를 배치함 ㆍ원래 자신의 위치 상 top/left 꼭지점 또는 bottom/right 꼭지점이 기준점이 됨 ㆍ그래서, 예를 들어 left: -40px 과 right: 40px 의 요소 배치결과는 같음 ㆍnormal-flow 흐름에 따름 ㆍ주변 요소에 영향을 주지 않으면서 offset 값으로 이동함  |
| absolute | ㆍ부모요소의 위치(padding)를 기준으로 offset 값에 따라 배치됨 ㆍ단, 부모요소의 position 속성값이 static 값이면 기준점이 될 수 없음 ㆍ그래서 부모요소가 기준점이 되지 못하면, 조상요소의 position 속성값이 static이 아닐 때까지 거슬로 올라가 기준으로 잡으며, 그래도 없으면 <body>가 기준이 됨 ㆍnormal-flow 흐름에 벗어남 ㆍ요소에 position 값을 absolute로 입력하면, 요소의 display 속성값이 block으로 변경됨  |
| fixed | ㆍ뷰포트(브라우저 창)를 기준으로 offset 값에 따라 배치됨 ㆍ즉, 화면 스크롤에 관계없이 항상 화면의 정해진 위치(우측상단 기준)에 정보가 나타남 ㆍ부모요소 위치에 영향을 받지 않음 ㆍ요소에 position 값을 absolute로 입력하면, 요소의 display 속성값이 block으로 변경됨  |
다. offset 속성과 속성값의 종류
| 속성 | 속성값 |
| top / left / right / bottom | px / % / auto |
※ offset 속성 관련하여, %의 속성값은 padding과 margin처럼 무조건 width를 기준으로 값이 계산되는
것이 아니라, top, bottom은 기준이 되는 요소의 height의 값을 기준으로, left, right는 기준이 되는
요소의 width 값을 기준으로 계산이 됨