[HTML5] 21. 박스의 배치와 position 프로퍼티 + 상대 배치와 절대 배치 + 고정 배치 + z-index 프로퍼티

21. 박스의 배치와 position 프로퍼티 + 상대 배치와 절대 배치 + 고정 배치 + z-index 프로퍼티

 

 

 

# 박스 배치와 position 프로퍼티

- normal flow

: 웹 페이지에 나타있는 순서대로 HTML 태그 배치

: position 프로퍼티를 이용해서 normal flow 를 무시할 수 있음

 

 

- position 프로퍼티를 이용한 배치법

정적 배치(디폴트)	상대 배치	절대 배치	고정 배치	유동 배치
positon : static	position : relative	position : absolute	position : fixed	float : left  /  float : right

 

 

- position 프로퍼티를 사용할 때 태그의 위치 및 크기

: top, bottom, left, right, height, width 프로퍼티로 지정함

 

 

 

 

# 상대 배치
: normal flow 의 기본 위치에서 left, top, bottom, right 프로퍼티 값만큼 이동한 상대 위치에 배치시킴

ex 1) 

ex 2) 5개의 <div> 중 k, h 글자의 <div>에 마우스를 올려놓았을 시 20px씩 상대 배치시키기

마우스를 아예 안 올렸을 때

 

k에 마우스 올렸을 때

 

h에 마우스 올렸을 때

 

 

 

 

# 절대 배치와 positon : absolute

브라우저의 크기가 변해도 태그가 절대 배치되어있는 상태이기에 태그 위치는 변하지 X

 

 

 

 

# 고정 배치와 position : fixed

ex) 브라우저 하단 오른쪽에 그림을 고정 배치하기

빨간 박스가 브라우저의 하단에 항상 출력됨

 

 

 

# 유동 배치와 float : right

ex) 브라우저의 오른쪽에 그림 항상 배치시키기

24일에 관한 내용의 블록은 브라우저의 오른편에 항상 출력됨

 

 

 

 

# z-index 프로퍼티

+ 맨 앞의 카드부터 z-index:7, 3, 2, -3 이다.