-
[CSS] position 속성HTML & CSS 2023. 2. 27. 16:14
CSS에서 position 속성은 HTML요소가 위치하는 방식을 정해줍니다.
또한 속성값에 따라서 top, left, bottom, right로 요소의 위치를 지정해 줄 수 있습니다.
| 속성 값
1. static
static값은 기본값입니다.
HTML 요소가 문서의 일반 흐름에 따라서 배치가 되고,
top, left, bottom, right 같은 속성값을 사용할 수 없습니다.
static
static
top: 30px, left: 20px
2. relative
relative값은 HTML요소를 원래 위치에 상대적으로 위치시킬 수 있습니다.
top, left, bottom, right 속성값을 사용하여 위치시킬 수 있습니다.
static
relativ
top: 30px, left: 20px
3. absolute
absolute값은 HTML요소를 가장 가까운 위치에 있고
position속성이 static이 아닌 상위 요소에 상대적으로 배치시킬 수 있습니다.
만약 position속성이 static이 아닌 상위 요소가 없으면 문서의 최상위 요소인 <body>에 상대적으로 배치가 됩니다.
따라서 기준으로 사용하고 싶은 상위 요소에 position속성을 static에서 relative로 바꿔주고
위치를 변경시키고 싶은 요소에 position 속성을 absolute로 바꾸어 주면 됩니다.
그리고 top, left, bottom, right 속성값을 사용하여 위치시킬 수 있습니다.
relative
absolute
bottom: 5px, right: -20px
4. fixed
fixed 값은 HTML요소를 브라우저 창에 상대적으로 배치시킬 수 있고
위치를 고정시켜서 스크롤해도 화면상 동일한 위치에 계속 유지됩니다.
fixed
이런 식으로 부모 요소에 상관없이 지정한 한 곳에 고정이 됩니다.
5. sticky
sticky값은 사용자의 스크롤 위치에 따라서 요소를 고정시킬 수 있습니다.
static
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore eos nulla molestiae distinctio perspiciatis delectus beatae recusandae quaerat repellat dignissimos! Atque accusamus magni ad mollitia nemo, commodi perferendis natus quaerat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore eos nulla molestiae distinctio perspiciatis delectus beatae recusandae quaerat repellat dignissimos! Atque accusamus magni ad mollitia nemo, commodi perferendis natus quaerat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore eos nulla molestiae distinctio perspiciatis delectus beatae recusandae quaerat repellat dignissimos! Atque accusamus magni ad mollitia nemo, commodi perferendis natus quaerat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore eos nulla molestiae distinctio perspiciatis delectus beatae recusandae quaerat repellat dignissimos! Atque accusamus magni ad mollitia nemo, commodi perferendis natus quaerat.sticky
top: 10px
위 예제처럼 스크롤이 내려가면서 해당위치에 오면 그대로 고정된 상태가 됩니다.
'HTML & CSS' 카테고리의 다른 글
[CSS] em, rem 알아보기 (0) 2023.03.06 [CSS] overflow 알아보기 (0) 2023.02.28 [CSS] flex 알아보기 (0) 2023.02.23 [HTML] strong, b 태그로 강조하기 (0) 2023.02.22 [CSS] text-shadow 속성 (0) 2023.02.21