CSS CSS position 속성 - 위치 지정
페이지 정보
작성자 모던DS
조회 2회 작성일 26-02-26 03:14
조회 2회 작성일 26-02-26 03:14
본문
CSS position 속성
position 속성은 문서 상에서 요소가 배치되는 방식(위치 결정 방식)을 정의합니다. top, bottom, left, right, z-index 속성과 함께 사용되어 최종 위치를 결정합니다.
주요 속성값
static: 모든 요소의 기본값입니다. 일반적인 문서 흐름에 따라 배치되며 위치 속성(
top,left등)이 적용되지 않습니다.relative: 요소를 일반적인 흐름에 따라 배치하되, 자신이 원래 있어야 할 위치를 기준으로 상대적으로 이동합니다. 요소가 이동해도 원래 차지하던 공간은 그대로 유지됩니다.
absolute: 문서 흐름에서 완전히 벗어납니다. 가장 가까운 위치 지정 부모(static이 아닌 부모)를 기준으로 배치됩니다. 부모 중 위치 지정 요소가 없다면
<body>를 기준으로 합니다.fixed: 문서 흐름에서 벗어나 브라우저 창(Viewport)을 기준으로 고정됩니다. 페이지를 스크롤해도 항상 같은 자리에 위치합니다.
sticky: 일반적인 흐름을 따르다가, 스크롤이 특정 임계점(예:
top: 0)에 도달하면 해당 위치에 고정됩니다. 부모 요소의 범위 안에서만 동작합니다.
CSS
#contents {
background: url('../images/bg.jpg') no-repeat;
background-size: cover;
width: 800px;
height: 500px;
margin: 0 auto;
position: relative;
}
- 이전글CSS background 속성 26.02.26
- 다음글CSS float 속성 - 위치 지정 26.02.26