-
CSS 요소의 위치 지정Front-End/CSS 2024. 2. 22. 10:48728x90반응형
bottom
- 요소의 하단 위치 지정
- position 속성 값이 static인 경우 무시
- top 속성과 함께 사용하지 않는다.
- 값
크기 리터럴left
- 요소의 좌측 위치 지정
- position 속성 값이 static인 경우 무시
- right 속성과 함께 사용하지 않는다.
- 값
크기 리터럴right
- 요소의 우측 위치 지정
- position 속성 값이 static인 경우 무시
- left 속성과 함께 사용하지 않는다.
- 값
크기 리터럴top
- 요소의 상단 위치 지정
- position 속성 값이 static인 경우 무시
- bottom 속성과 함께 사용하지 않는다.
- 값
크기 리터럴position
- 요소의 포지셔닝
- 기본값 : static
- 값
relative : 상대적 포지셔닝. 본래 요소의 위치를 기준점으로 움직인다.
absolute : 절대적 포지셔닝. position이 static이 아닌 가장 가까운 부모/선조를 기준으로 움직인다. 그러한 부모/선조가 없다면 문서를 기준으로 움직인다.
다른 요소의 흐름에 영향을 미치치 않는다.
fixed : 고정 포지셔닝. 뷰포트(문서의)를 기준으로 움직인다. 화면에 떠서 움직이며 스크롤에 영향을 받지 않는다.
다른 요소의 흐름에 영향을 미치치 않는다.
static : 포지셔닝을 하지 않음. top, right, bottom, left 속성을 무시한다.z-index
- Z축으로의 배치 순서를 설정
- position 속성 값이 static인 요소는 해당 속성 무시
- 값
정수 : 기본값 0, 값이 클수록 위로(사용자에게 가까이)배치됨728x90반응형'Front-End > CSS' 카테고리의 다른 글
CSS 테두리 설정 (0) 2024.02.22 CSS 요소의 내부, 외부 여백 (0) 2024.02.22 CSS 요소의 글꼴 지정 (0) 2024.02.22 CSS 요소의 크기 지정 (0) 2024.02.22 CSS 속성 부여 (0) 2024.02.22