Frontend 개발자 - hyo.loui
position 본문
❤️🔥TIL : Today I Learned
position
CSS position에 대해 설명합니다.
position ?
- CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다.
top , right , bottom , left 속성이 요소를 배치할 최종 위치를 결정합니다.
구문
- static : 기본값으로 요소들이 겹치지 않고 상 -> 하로 배치 됩니다.
- relative : 원래 배치되어야 할 위치에서 지정한 값 만큼 떨어진 곳에 요소를 배치합니다.
- absolute : 가장 가까운 상위 요소의 위치를 기준으로 지정한 값 만큼 떨어진 곳에 요소를 배치합니다.
- fixed : 웹 브라우저 화면 전체를 기준으로 배치합니다. 스크롤을 하더라도 위치가 고정되는 특징이 있습니다.
- sticky : 스크롤 위치가 임계점에 이르면 position: fixed와 같이 화면에 고정할 수 있는 속성으로
스크롤 영역 기준으로 배치합니다.
absolute 를 사용하는 방법
- 프로젝트를 진행 하면서 자식요소는 부모 요소를 기준으로 위치를 지정해야 할 일이 자주 발생합니다.
위 같은 상황에서 position : absolute를 사용하면 해결이 가능한데
상대 경로(기준)가 되는 상위 요소에서 position : relative 속성이 있어야 합니다.
없다면 초기 컨테이닝 블록(html 최상단)을 기준으로 삼습니다.
참조 : https://developer.mozilla.org/ko/docs/Web/CSS/position#%EA%B5%AC%EB%AC%B8
position - CSS: Cascading Style Sheets | MDN
CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top (en-US), right (en-US), bottom (en-US), left (en-US) 속성이 요소를 배치할 최종 위치를 결정합니다.
developer.mozilla.org
최종 정리
- position은 문서상의 요소를 지정하는 방법을 정의 하고 top, left, right, bottom 등으로 위치를 결정합니다.
- absolute로 부모요소를 상대로 위치를 지정하고자 할 때는 부모 요소에서 position : relative 속성이 있어야 합니다.
'HTML, CSS' 카테고리의 다른 글
| 시멘틱 태그 (0) | 2023.04.06 |
|---|---|
| html form 태그 속성 (1) | 2022.11.24 |
| CSS 는 '인테리어' (0) | 2022.11.04 |
| HTML 은 '건축물' 입니다. (0) | 2022.11.04 |
