z-index 사용 전
z-index 사용 후
A 파트가 B 파트 속으로 들어가 보인다.
휴대폰 아래 부분을 아래에 있는 흰바탕 안으로 집어 넣고 싶을 때
z-index를 사용한다.
html 기본 포지셔닝
z-index를 사용하기 전에 html 기본 포지셔닝을 알아야
어떤 게 먼저 보이는 게 기본 설정 되어있는지 알 수있다.
1 부모, 자식 태그가 같이 있을 때 자식 태그가 화면 위에 위치한다.
자식 태그는 부모 태그 위에 보여진다.
부모 태그(div)는 보라색,
자식 태그 (h1)은 황토색인데
황토색이 먼저 보이고, 보라색이 그 밑에 깔려있다.
자식태그가 우선 순위에서 앞선다.
2. 코드가 위에서부터 아래로 내려가는 순서대로
화면 디스플레이도 순서대로 나타난다.
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%만큼 떨어지게
설정할 수 있다.
출처
'CSS > CSS' 카테고리의 다른 글
CSS] selector 선택자 문법 (0) | 2021.07.25 |
---|---|
CSS] class / id / pseudo class (0) | 2021.07.25 |
CSS] 이미지 기울이기, 사이즈 조절, 원으로 만들기 (0) | 2021.07.19 |
아이콘 붙이기 / Font Awesome (0) | 2021.07.19 |
CSS] float, clear (0) | 2021.07.05 |
댓글