[CSS] z-index의 개념 및 사용방법

---

안녕하세요. 

 

요근레, 퍼블리시 할일 들이 많아지네요.

 

그래서 이참에 퍼블리시에 대해서 제대로 알고가려고

 

하나하나 작성합니다.

 

---

z-index

👌

z-index는 position : [속성];

 

이 필수로 적용되어야 합니다.

 

그래야 position: 속성을 받은 요소들끼리 z-index 비교하여

 

앞 뒤를 정하게 됩니다.

 

z-index는 층을 의미합니다.

 

예를 들어, 

 

 

 

 

다음을 예시를 뜯어보면

 

 

 

다음과 같이 세 가지 요소로 나뉘어진걸 

 

우리는 확인해 볼 수 있습니다.

 

요소들은 

 

배경 / 글자 / 버튼 

 

이렇게 세가지 요소들이 있다는 것을 저희는 다시 한번 확인 해 볼 수 있죠..

 

 

하지만

 

만약 배경 레이어가 더 위에 있게 된다면?

 

 

 

 

 

 

 

다음과 같이 아무것도 없게 보이게 됩니다. 

 

왜냐하면, 배경화면이 가리고 있기 때문이죠.

 

 

 

 

 

배경 레이어에

 

z-index : 2 를 줘보고

 

글씨에다가 

 

z-index: 1; 줘보겠습니다.

 

 

 

 

 

 

다음과 같이 없어 지는것을

 

우리는 확인 할 수 있습니다.

 

 

 

 

이번에는 

 

z-index: 1 

 

로 똑같이 통일 해보겠습니다.

 

 

 

 

그렇게 되면 다음과 같이 다시 나타나는것을 확인해 볼 수 있습니다.

 

 

 

Result

 

 

정리 보자면

 

z-index 의 값이 클 수록 

 

위로 올라온다고 보면 되겠습니다.

 

 

 

 

그렇기 때문에 필요한 요소가 있다면

 

꼭 z-index로

 

번호를 다르게 주어서 나타나게 해야됩니다.

 

 

 

---

 

 

 

To be continue..