[CSS] float 속성 / z-index

float

float 속성은 요소의 위치를 잡을때, 아주 중요한 역할을 하는 스타일 속성이다.

 

float속성을 사용 하지 않고 이미지와 텍스트를 단순히 배치 하게 되면 어떻게 표시 되는지 보자.

이미지는 인라인 요소이고, 단락은 블록 요소여서 아래와 같이 배치 된다.

float 속성을 사용 하지 않고 나온 결과값

그럼 이번에는, float: left 이용 하여 보자.

float: left 을 이용하여 나온 결과값

 

일반적으로는 어떤 요소든지 float 속성을 적용할 수 있다.

float속성으로는 요소를 컨테이너의 왼쪽이나 오른쪽으로만 배치될 수 있다.

위쪽이나 아래쪽으로 float 할 수는 없다.

 

 

z-index

이어 볼 내용은 z-index

z-index속성은 요소의 스택 순서(즉, 요소가 다른 요소의 앞에 위치하느냐, 뒤에 위치하느냐)를 지정한다.

 

아래 코드와 함께 결과값을 보면 이해하기 쉬울거다.

HTML 코드

위 코드를 실행하면 아래와 같이 나온다.

z-index 값이 클수록 위에 놓여진다.

 

여기서 주의해야 할 점은, 

z-index는 요소의 position 속성이 absolute나 fixed로 설정 되어 있어야 작동한다는 점이다.