요즘 열공중 입니다 한가지 아주 궁금한것이 있어서요
이렇게 질문 드립니다
z-index 이것에 대하여 검색을 하여 봤지만 쫌 어렵네요
저는요 z-index 뒤에 숫자 같이 따라가는되요 이 숫자가 중복이 되여도 상관 없는 건가요...?
그래서 z-index 대하여 쉽께 좀 알려주실수 있을까요 ...?
항상 감사합니다
요즘 열공중 입니다 한가지 아주 궁금한것이 있어서요
이렇게 질문 드립니다
z-index 이것에 대하여 검색을 하여 봤지만 쫌 어렵네요
저는요 z-index 뒤에 숫자 같이 따라가는되요 이 숫자가 중복이 되여도 상관 없는 건가요...?
그래서 z-index 대하여 쉽께 좀 알려주실수 있을까요 ...?
항상 감사합니다
댓글 13
순서라고 생각하시면 편하실 듯 합니다.
Z-INDEX 수치가 적을수록 맨 뒤로 가게되고 높을 수록 맨 앞으로 갑니다.
동일한 수치일때는 동일한 위치선상에 놓이게 되는거구요
위의 이미지를 예로 들면
왼쪽)
파란색은 Z-INDEX 가 1이고(z-index:1)
노란색은 Z-INDEX 가 10이 되겠죠(z-index:10)
오른쪽)
파란색은 Z-INDEX 가 10이고
노란색은 Z-INDEX 가 1이 되겠죠
감사 합니다 그럼 이게 이미지에만 해당이 되는것인가요 ...?
그리고 숫자가 10 단위로 올라가는 것인가요 ...?
왼쪽하고 오른쪽하고도 위치에 따라서 숫자가 달라지는가요
숫자는 예시로 넣은겁니다. 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로 두면 성별을 알 수 있게 돼요~
감사 합니다