web_frontend(24)CSS 배치

배치

 

position (요소의 위치 지정 기준)

 

static : 기준 없음

relative : 요소 자신을 기준

absolute : 위치 상 부모 요소를 기준 -> 위치 상 부모 요소를 꼭 확인

fixed : 뷰포트를 기준

sticky : 스크롤 영역 기준

 

position과 같이 사용하는 css 속성들

모두 음수를 사용할수 있음

top, bottom, left, right, z-index 

 

top, bottom, left, right

요소의 각 방향별 거리 지정

 

auto : 브라우저가 계산

단위 : px, em, rem 등 단위로 지정

 

ex)

top : 30px; 

left : 30px;

 

 

relative는 자기가 원래 있는 위치를 기준함

relative를 통해 배치를 하더라도(위치이동) 시각적으로만 비어 있고 그 자리에 있음

바뀐 위치가 그 요소의 공간이 아님 -> 거의 사용하지 않음

 

 

absolute를 선언하면 요소가 공중에 붕 뜨는 느낌

주변과의 상호 작용이 무너짐

position : absolute; 사용 방법이  많이 사용 되는데

위치상 부모를 지정해 줄때 원하는 부모 요소에 position: relative; 를 적용해준다.

 

 

요소 쌓임 순서(Stack order)

어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정

 

1. 요소에 position 속성의 값이 있는 경우 위에 쌓임. (기본값 static 제외)

2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임.

3. 1번과 2번 조건까지 같은 경우, HTML의 다음 구조일 수록 위에 쌓임.

 

 

 

z-index (요소의 쌓임 정도를 지정)

auto: 부모 요소와 동일한 쌓임 정도 -> 0

숫자 : 숫자가 높을 수록 위에 쌓임 -> 음수도 가능한데 -2 이하는 잘 사용안함

 

되도록 z-index 값에 999처럼 큰값 입력 하지 않는게 좋음 나중에 문제가 많이 발생함

그리고 position속성이 없는경우z-index 아무리 높게 잡아도 적용안되는것 명심

 

position 속성의 값으로 absolute, fixed가 지정된 요소는 display속성이 block으로 변경된다.