<CSS> z-index (태그들이 보이는 순위 정하기)

6.10

 

 

1. z-index : 가상의 z축을 만들어 태그들에게 z축의 값을 준다. (z축 : 노트북 화면에서 수직을 이룬다)

-> 어떤 태그가 어떤 태그를 덮는지 순서를 정할 수 있다.

* 화면을 바꾸기 위해 태그의 순서를 바꾸는 것은 좋지 않다. 때문에 z-index 사용

 

2.

1) 값은 px 값이 아닌 숫자만 적는다

2) 태그의 z-index 값을 100 간격으로 주고 태그가 추가 되면 z-index를 10단위로 하기도 한다.

3) 9999 : 가장 위

4) -1 : 정말 아래 (극단적인 경우에만 사용)

 

 

3. 사용 예

 

 

1) HTML 구조

 

 

2) pos1에 position : absolute 를 주고 기준확인  

 

 

 

 

3) pos2, pos3에도 속성주기.

 

 

 

' pos 1 이 맨 위에 올라갔으면 좋겠다 ! ' 

 

 

 

4) pos1 에 z-index : 1 ; --> 다른것들은 0인데 pos1만 1이므로 맨 위에 올라간다

 

 

 

 

 

' pos2가 제일 위에 올라가고 pos1, pos2가 적절한 z-index를 가졌으면 좋겠다. !'

 

 

5) pos1 에 z-index : 1, pos2 에 z-index : 2, pos3 에 z-index : 1;

 

 

 

 

 

 

 

3. z-index가 이상할 때 :

 

자식의 z-index는 부모의 z-index 안에서 정해진다. (z-index : 객관적 수치가 아니라 상대적)

즉 , 부모끼리 정해진 z-index 순위는 자식이 아무리 z-index가 높거나 낮아도 바꿀 수 없음.

(+) 다른 부모 안에 있는 태그 사이에 낄 수 없다.

 

1) HTML 구조

 

 

2) 부모태그 nemo1,2에 z-index 주기. (nemo2가 더 위에 있다)

 

 

3) 자식태그 inner에 z-index주기.

nemo1의 inner 에게는 100, nemo2의 inner 에게는 0.

-> 원래대로라면 nemo1의 inner가 nemo2의 inner를 덮어야 한다.

 

 

 

nemo2의 z-index가 더 높기 때문에 nemo2의 inner가 nemo 1 의 inner를 덮는다.