CSS Stacking order(priority between Position & Float)

Q. position속성을 사용한 요소와 float속성을 사용한 요소가 동일한 위치에 있다면 어떻게 될까?

A. 정답은 position 속성을 사용한 요소가 앞에 온다.

Q. 그러면 float을 사용한 요소가 앞에 올수는 없을까?

A. 답은 position을 사용한 요소에 z인덱스를 -1을 주면 된다.

즉, position의 default z-index는 0 인 것이다.

Q. position 속성을 사용한 요소가 두 개인데 겹치는 경우 누가 앞에 올까?

A. html 코드 상에서 뒤에 오는 요소가 앞에 나온다. css는 영향을 미치지 못한다.

Q. position 속성을 사용한 요소가 겹칠 때 html 상에서 앞에 있는 요소를 제일 앞쪽에 위치 시키려면 어떻게 해야할까?

A. html 상에서 먼저 온 요소의 z-index를 겹치는(html 상에서 뒤에있는) 요소보다 크게 하면 된다. z-index를 변경하지 않았다면 기본 값이 0이므로 제일 앞에 위치할 요소의 z-index를 1로 하면 된다.

메뉴얼은 다음을 참고

bako94