Notice
Recent Posts
Recent Comments
Link
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
Tags more
Archives
Today
Total
관리 메뉴

bright jazz music

CSS의 position 속성으로 HTML 요소 배치 본문

카테고리 없음

CSS의 position 속성으로 HTML 요소 배치

bright jazz music 2023. 6. 13. 12:20

출처:

https://www.daleseo.com/css-position/

1. position: static

- position 속성을 별도로 지정하지 않으면 기본값인 static이 적용된다.
- position 속성이 static인 요소는 HTML 문서 상에서 원래 있어야 하는 위치에 배치된다.
- 이는 요소들이 HTML에 작성된 순서 그대로 브라우저 화면에 표시된다는 것을 의미하며,
top, left, bottom, right 속성값은 positio 속성이 static일 때는 무시된다.

2. position: relative

- position 속성을 relative로 설정하면 요소를 원래 위치에서 벗어나게 배치할 수 있다.
- 요소를 원래 위치 기준으로 상대적으로 배치한다고 생각하면 이해가 쉽다.
- 요소의 위치 지정은 top, bottom, left, right 속성을 이용하여 요소의 원래 위치를 기준하여 상하좌우로 떨어진 위치를 지정할 수 있다.

3. position: absolute

- absolute 속성값은 relative 속성값과 함께 사용되는 경우가 많다.
- absolute 속성값을 사용하면 배치 기준이 상황에 따라 다양화 될 수 있다.
- position의 속성값이 absolute인 경우 해당 요소는 배치 기준을 자신이 아닌 상위 요소에서 찾는다.
- DOM트리를 따라 올라가다가 position 속성이 static이 아닌 첫 번째 상위 요소가 해당 요소의 배치기준이 된다.
- position 속성이 static이 아닌 요소가 없다면 DOM 트리의 최상위에 있는 <body> 요소가 배치 기준이 된다.
- 실제로는 부모요소(가장 가까운 상위 요소)를 기준으로 top, left, bottom, right 속성을 적용해야 하기 때문이다.
- 따라서 어떤 요소의 display 속성을 absolute로 설정하면 부모요소의 display 속성을 relative로 지정해 주는 것이 관례이다.
- position: absolute인 요소는 HTML문서에서 독립되어 앞뒤에 나온 요소와 상호작용하지 않는다.
- 만약 두 번째 요소가 absolute이고 첫 번째 요소의 배치기준이 static이라면 두 번째 요소가 빠지고 첫 번째와 세 번째 요소가 나란히 배치될 수 있다.

4. position:fixed

- position 속성을 fixed로 지정하면 요소를 항상 고정된 위치에 배치할 수 있다.
- 화면을 위아래로 스크롤하더라도 화면의 특정 부분에 고정되어 움직이지 않는 UI가 대표적인 예다. (라이브 채팅 버튼)
- 이것이 가능한 이유는 fixed의 속성값의 배치 기준이 자신이나 부모 요소가 아닌 viewport, 즉 브라우저 전체이기 때문이다.
- top, left, bottom, right 속성은 각각 브라우저 상단, 좌측, 하단, 우측으로부터 해당요소가 떨어져 있는 거리를 결정한다.
- position:fixed 요소도 position:absolute 요소와 마찬가지로 HTML 문서 상에서 독립되어 앞뒤 요소와 상호작용하지 않는다.

5. position:sticky

- 최근에 추가된 속성값. 브라우저 화면을 스크롤링할 때 효과가 나타난다.
- 부모의 요소가 스크롤링이 가능해야 한다. 부모요소에 overflow: auto;를 적용한다.
- 자식 요소에 position:sticky를 설정해준다. 이때 만약 top을 0으로 설정한다면 자식요소의 top이 0이 되었을 때 화면에 고정된다.

Comments