CSS] Z-index 제트 인덱스

 

z-index 사용 전

변화 전

 

z-index 사용 후

A 파트가 B 파트 속으로 들어가 보인다.

휴대폰 아래 부분을 아래에 있는 흰바탕 안으로 집어 넣고 싶을 때

z-index를 사용한다.

 

 

html 기본 포지셔닝

z-index를 사용하기 전에 html 기본 포지셔닝을 알아야

어떤 게 먼저 보이는 게 기본 설정 되어있는지 알 수있다. 

 

1 부모, 자식 태그가 같이 있을 때 자식 태그가 화면 위에 위치한다. 

 자식 태그는 부모 태그 위에 보여진다.

html

css

부모 태그(div)는 보라색, 

자식 태그 (h1)은 황토색인데 

황토색이 먼저 보이고, 보라색이 그 밑에 깔려있다. 

자식태그가 우선 순위에서 앞선다.

결과물

 

2. 코드가 위에서부터 아래로 내려가는 순서대로

화면 디스플레이도 순서대로 나타난다. 

html

html 순서대로 나옴

 

 

 

1,2,3 모두에

position:absolute;를 준다면

3번이 맨위에

2번이 중간에 

1번이 맨 아래에

포개지게 된다. 

c가 맨 위라서 c만 보임

 

이 순서대로 포개어져 있음. 

 

 

 

 

 

 

 

 

Z-index 개념

모든 element들은

x, y 포지션을 가지고 있다. 

x, y 포지션은 양 옆 또는 위 아래로 움직인다.

 

여기에 더해 모든 element들이 또 가지고 있는 것이 있다.

z 포지션 또는 z-index라는 것이다. 

 

이 것은 화면을 보는 사람을 기준으로

화면에 보이는지 화면 뒤로 숨기는 지를 정한다.

 

위에 있는 변신 후 사진은

A파트가 잘린 게 아니라

아래 B 파트보다 순서에 밀려서

뒤에 숨어 있는 것이다.

 

화면을 줄여보면 밑에 숨어져 있던 핸드폰 밑부분이 보인다.

 

 

 

 

아무 설정이 되어 있지 않은 element들은

z-index가 0으로 본다. 

 

이 세 상자 모두에 

position: absoulte;를 준 상태에서 

 

 

 

 

 

빨간 상자에 z-index: 1;을 주면 빨간 상자가 다른 상자보다

앞으로 튀어나온다.

 

 

 

 

파란 상자에 

z-index: -1;을 주면

맨 뒤로 간다.

 

 

 

 

z-index는 해당 element들이 position 일 때만 적용이 된다. 

하지만 position: static;은 적용되지 않는다. 

 

position: absolute;

position: relative;

position: fixed; 는 적용이 된다. 

 

 

 

위 핸드폰 사진을 다시 생각해 보면 

A part에서 폰 사진에 z-index: -1;을 하지 않는 이유는 

순서가 젤 뒤로 밀려서 배경에 가려서 화면에 보이지 않게 되기 때문이다.

 

그래서 아래 B 파트를 올려줘야 하는데

B 파트에 position: relative;를 주는 이유는 

자신의 flow를 벗어나면 안되기 때문이다. 

 

여기서 

#feature에서 z-index: 1;를 써주지 않아도 

둘 다 position이면

아래에 있는 파트가 위로 올라간다. 

똑같은 효과가 나온다. 

 

 

폰 사진 위치 조정 

 

폰 사진을 조금만 가리게 하고,

더 보이게 하고 싶다면,

폰 사진이 들어간 전체 박스의 padding을 조절한다.

폰 아래 부분이 더 보인다

 

 

 

폰 사진을 좀 더 오른쪽으로 옮기고 싶다면 

position: absolute;를 준 상태이니

부모 태그에서 right쪽에서 20%만큼 떨어지게 

설정할 수 있다.

 

부모 태그에서 오른쪽 20%만큼 위치함

 

 

 

 

 

 

 

 

출처

https://www.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/12299744?start=0#overview