1. position 프로퍼티
요소 위치 정의
top, bottom, left, right 프로퍼티와 함께 사용하여 위치 지정
1.1 static (기본위치) - 지정 안하면 기본값
position 프로퍼티 지정하지 않았을 때와 같음
위에서 아래로, 왼쪽에서 오른쪽 부모요소 위치 기준으로 배치
이미 설정된 position 무력화 위해 사용됨
top, bottom, left, right 프로퍼티와 함께 사용X, 무시됨
1.2 relative
기본 위치 기준으로 좌표 프로퍼티(top, bottom, left, right) 사용하여 위치 이동
static과 relative 차이는 좌표 프로퍼티 동작 여부, 그 외는 동일하게 동작
1.3 absolute 절대위치
부모 요소 또는 가장 가까이 있는 조상 요소를 기준으로 좌표 프로퍼티(top, bottom, left, right)만큼 이동
relative, absolute, fixed 프로퍼티가 선언된 부모 또는 조상 요소 기준으로 위치가 결정됨
만일 부모 또는 조상이 static인 경우 document body 기준으로 좌표 프로퍼티대로 위치
따라서 배치 기준으로 삼기 위해서는 부모요소에 relative 정의해야
이때 다른 요소가 먼저 위치 점유해도 뒤로 밀리지 않고 덮어쓰게됨 (=부유객체)
absolute 선언 시, block 레벨 요소의 width는 inline 요소와 같이 content에 맞게 변화되므로 적절한 width 지정해야
relative와 absolute의 차이점
relative : 기본위치(static으로 지정 시) 위치를 기준으로 위치 이동 > 무조건 부모를 기준으로 위치
absolute : 부모가 static이 아닌 프로퍼티로 지정된 경우에만 부모 기준으로 위치, 따라서 부모와 조상 모두 static인 경우 > document body 기준으로
따라서 absolute 요소는 부모의 영역 벗어날수도 있음
1.4 fixed 고정위치
부모 요소와 관계없이 브라우저의 viewport 기준으로 이동
스크롤 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치
fixed 선언시, block 요소의 width는 inline 요소와 같이 content에 맞게 변화> 적절한 width 지정해야
2. z-index 프로퍼티
z-index에 큰 숫자값 > 화면 전면에 출력
static이외의 요소에만 적용
3.overflow
자식 요소가 부모요소 영역 벗어났을때 처리 방법 정의
visible 벗어난 부분 표시(기본값)
hidden 잘라 보이지 않게
scroll 벗어난 부분 없어도 스크롤 표시
auto 벗어난 부분 있을 때만 스크롤 표시
특정 방향으로만 스크롤 표시하고자할 때는 overflow-x나 overflow-y 프로퍼티 사용
'개발 스터디 > css' 카테고리의 다른 글
| 스타일의 상속과 적용 우선순위 (0) | 2023.07.25 |
|---|---|
| 요소 정렬 (0) | 2023.07.25 |
| 폰트와 텍스트 (0) | 2023.07.21 |
| 백그라운드 (0) | 2023.07.21 |
| display, visibility, opacity 프로퍼티 (0) | 2023.07.21 |
