Front/CSS
[CSS] position 속성
오선지♬
2022. 3. 27. 10:59
728x90
반응형
position 속성
- css에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정.
- 정확한 위치 지정을 위해서는 top, left, bottom, right 속성과 함께 사용
static
- position 속성을 따로 지정해주지 않았다면, 기본값인 static이 적용.
- position : static; 으로 되어있으면 HTML에 작성된 순서대로 화면에 표시하라는 의미이기 때문에
top, left, bottom, right 속성을 작성해도 무시된다.
relative
- position : relative; 로 되어있으면, 이 요소를 원래 위치 기준으로 상대적 ( relative )으로 위치를 지정한다는 의미이므로, top, left, bottom, right 속성을 이용하여 원래 위치에서 얼만큼 이동시킬지 설정해주면 된다.
예)
position: relative;
top: 50px;
left: 50px;
absolute
- 위치가 설정된 부모요소를 기준으로 위치를 설정
(위치가 설정된 조상요소를 가지지 않는다면, HTML 문서의 body 요소를 기준으로 위치 설정 )
fixed
- 뷰포트( view port ) : 브라우저 전체화면
를 기준으로 위치를 설정하는 방식.
sticky
- 스크롤 될때 미리 설정한 값의 위치에 고정되어 배치됨.
728x90
반응형