- 박스 이동, 정렬(float 속성)


  • 속성 : float
  • 값 : left, right, none, inherit
  • 기본값 : none
  • 적용대상 : position 속성의 값이 'static' 인 요소(content 속성으로 생성된 내용 제외)



속성 값에 대한 의미는 다음과 같다. 

float: left : 그 요소를 왼쪽으로 float된 블록 박스로 만든다.

float: right : 그 요소를 오른쪽으로 float된 블록 박스로 만든다.

float: none : 그 요소를 float 하지 않는다. 


float 속성을 적용하는 요소는 어떠한 형태로든 폭을 지정해야 하는 규칙이 있다. 

float는 뒤에 이어지는 다른 블록 레벨 요소의 박스에서도 유효하며 float가 헤제되지 않는다.(clear 속성으로 해제 가능) 



- 박스 이동, 정렬 해제(clear 속성)


  • 속성 : claer
  • 값 : left, right, none, both, inherit
  • 기본값 : none
  • 적용대상 : 블록 레벨 요소



속성 값에 대한 의미는 다음과 같다. 

clear: none : float에 대하여 박스의 위치를 제약하지 않고 float는 계속해서 유효, float는 해제되지 않는다.

clear: left : 왼쪽으로 float된 박스보다 아래에 새로운 박스를 생성하여 표시, 왼쪽 float 해제

clear: right : 오른쪽으로 플로트된 박스보다 아래에 새로운 박스를 생성하여 표시, 오른쪽 float 해제

clear: both : 좌우로 float된 박스보다 아래에 새로운 박스를 생성하여 표시, 좌우 양측 float 해제

clear 속성은 float 된 박스 뒤에 이어지는 박스가 인접하지 않게 배치하는 속성이다. 



- 겹쳐지는 순서(z-index 속성)


  • 속성 : z-index
  • 값 : auto, 정수, inherit
  • 기본값 : auto
  • 적용대상 : position 속성의 값이 'static' 이외의 요소



속성 값에 대한 의미는 다음과 같다. 

z-index: auto : 그 박스의 겹쳐지는 순서는 부모 요소와 같다. 새로운 순서를 지정하지 않는다.

z-index: 정수 : 그 박스의 겹쳐지는 순서를 명시하며 기준이 되는 '0'이 자동으로 지정된다. 값이 큰 박스가 값이 작은 박스보다 항상 앞에 표시된다. 마이너스 값도 지정이 가능하다. 같은 값의 박스는 XHTML 에서 뒤에 출현하는 요소가 앞에 표시된다.



중요!

z-index는 엘리먼트의 position 속성이 absolute, relative, fixed일 경우만 정상적으로 동작합니다.


부모 엘리먼트의 z-index값에 따라 ie6,7의 적용에 영향을 미친다.

서로다른 부모엘리먼트에서 레이어를 띄울경우 부모엘리먼트에 단순히 position:relative;만을 주고 레이어 엘리먼트에 z-index값을 적용하였을때 마지막에 온 부모 엘리먼트 가 최상위로