요즘 열공중 입니다 한가지 아주 궁금한것이 있어서요
이렇게 질문 드립니다
z-index 이것에 대하여 검색을 하여 봤지만 쫌 어렵네요
저는요 z-index 뒤에 숫자 같이 따라가는되요 이 숫자가 중복이 되여도 상관 없는 건가요...?
그래서 z-index 대하여 쉽께 좀 알려주실수 있을까요 ...?
항상 감사합니다
-
?
?
숫자는 예시로 넣은겁니다. 1과 2로 잡으셔도 상관없어요.
단, 차이가 많이 날수록 영향력이 커지기 때문에 가급적이면 차이나도록 넣으시길 바랍니다.
Z-INDEX는 이미지뿐만 아니라 모든 객체에 사용이 되구요주로 이미지나 레이어쪽에 사용합니다.
-
기본적인 개념은 윗분이 잡아주셨는데, 가까운 곳에 있는 태그들끼리는 쉽게 적용이 되지만 소속이 다른 태그는 순서 맞추기가 쉽지 않습니다. 자신의 z-index뿐 아니라 부모 태그의 z-index에도 영향을 받으니까요. position: absolute로 위치를 맞춰 놓으면 그것도 또 따로 놀더군요 ㅡ.ㅡ 만약 의도하는 순서대로 나오지 않는다면 부모 태그 또는 position의 문제일 가능성이 높습니다.
z-index가 같은 태그들은 그냥 소스에 나오는 순서대로 차곡차곡 쌓입니다. 맨 뒤로 보내고 싶으면 -1, -10 등의 음수를 넣어도 되고요. 아무리 높여도 안 되면 확 그냥 1억 정도로 높여 버리기도 합니다 ㅋㅋ (대부분의 브라우저가 32비트이므로 21억 이상의 값은 사용할 수 없다고 하네요.)
-
?
기진곰님이 알려주신것은 더 고난위도의 내용 입니다 ㅠㅠ
-
?
혹시 포토샵이나 일러스트를 써보셨다면 레이어 순서라고 생각하시면 편합니다.
레이어들을 이리저리 묶어놓고 순서 바꾸다 보면 머리아파지죠 ㅋㅋ
-
모든 엘레먼트에 대상이 되지만,
그 대상의 position이 relative, fixed, absolute에서만 동작하며, static에는 반영되지 않습니다. -
z-index는 영어의 뜻되로 Z-색인
3차원에서 사용하는 Z축을 의미합니다.
각 엘리멘트 요소들이 동일한 2 차원 공간을 공유 할 때 다른 요소들의 앞이나 뒤에 나타나는
레이어 순서라고 볼 수 있습니다.
-
?
요것을 보니 어느정도 약간 감이 옵니다 ㅎㅎ
감사합니다 -
?
z-index 를 모두 -1로 두면 성별을 알 수 있게 돼요~
-
?
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㄴㅋ
순서라고 생각하시면 편하실 듯 합니다.
Z-INDEX 수치가 적을수록 맨 뒤로 가게되고 높을 수록 맨 앞으로 갑니다.
동일한 수치일때는 동일한 위치선상에 놓이게 되는거구요
위의 이미지를 예로 들면
왼쪽)
파란색은 Z-INDEX 가 1이고(z-index:1)
노란색은 Z-INDEX 가 10이 되겠죠(z-index:10)
오른쪽)
파란색은 Z-INDEX 가 10이고
노란색은 Z-INDEX 가 1이 되겠죠