728x90
반응형
SMALL
1. css Position
- 요소의 위치를 결정하는 방식을 결정
2. 위치 지정방식
2-1. 정적 위치 지정방식
- static position, 기본값
- HTML 요소의 위치를 결정하는 기본적인 방식
- 단순히 웹 페이지의 흐름에 따라 차례대로 요소들이 위치를 결정하는 방식
2-2. 상대 위치 지정방식
- relative position
- HTML 요소의 기본 위치(정적 위치 지정방식)를 기준으로 위치를 재설정하는 방식
- top, left, right, bottom 속성값을 사용하여 재설정
2-3. 고정 위치 지정방식
- fixed position
- 웹 페이지가 스크롤 되어도 고정위치로 지정된 요소는 항상 같은 곳에 위치
- 뷰포트를 기준으로 위치를 설정하는 방식
- top, left, right, bottom 속성값을 사용할 수 있음
2-4. 부모태그를 이용한 고정 위치 지정방식
- sticky position
- fixed가 브라우저 화면의 절대 위치를 사용하는 반면 sticky는 부모 태그의 절대 위치값을 사용하는 방식
- 익스플로러에서는 작동하지 않음
2-5. 절대 위치 지정방식
- absolute position
- 뷰포트를 기준으로 위치를 설정하는 방식
- 조상요소를 기준으로 위치를 지정할 수 있음
- 조상요소를 가지지 않으면 body 요소를 기준으로 위치를 결정
- 조상요소를 기준으로 위치를 지정하려면 조상요소는 반드시 정적 위치 지정방식이 아니어야 함
- top, left, right, bottom 속성값을 사용할 수 있음
3. z-index
- HTML 요소의 위치를 설정하게 되면 위치 및 방식에 따라 요소가 겹칠 수 있음
- 겹쳐지는 요소들이 쌓이는 순서를 결정할 때 z-index를 사용
- 순서는 숫자의 크기가 클수록 위에 위치하고 작을 수록 아래 위치하게 됨
728x90
반응형
LIST
'Web > CSS' 카테고리의 다른 글
[CSS] Flex 레이아웃 - 요소 정렬, 배치하기 (0) | 2023.04.04 |
---|---|
[CSS] 레이아웃 설정하기 - 2단 레이아웃, 3단 레이아웃, 다단 레이아웃 (0) | 2023.03.31 |
[CSS] 디스플레이(display) 속성, 폼(form) 알아보기! (0) | 2023.03.31 |
[CSS] 패딩(padding), 마진(margin), 테두리(border) 속성 알아보기! (0) | 2023.03.31 |
[CSS] 박스모델(Box Model)과 내용(Content)의 차이점, 박스사이징(box-sizing) (0) | 2023.03.30 |