요즘 열공중 입니다 한가지 아주 궁금한것이 있어서요 

이렇게 질문 드립니다 

 

z-index 이것에 대하여 검색을 하여 봤지만 쫌 어렵네요 

저는요 z-index 뒤에 숫자 같이 따라가는되요 이 숫자가 중복이 되여도 상관 없는 건가요...?

 

그래서 z-index 대하여 쉽께 좀 알려주실수 있을까요 ...?

항상 감사합니다

 

 

  • ?

    순서라고 생각하시면 편하실 듯 합니다.
    Z-INDEX 수치가 적을수록 맨 뒤로 가게되고 높을 수록 맨 앞으로 갑니다.
    동일한 수치일때는 동일한 위치선상에 놓이게 되는거구요

     

    1cb798a62ccb1d5ce2b639645d037e74_EFsNRUsaaQRnmsnMOF3c5u1XjoDexini.png

     

    위의 이미지를 예로 들면

     

    왼쪽)

    파란색은 Z-INDEX 가 1이고(z-index:1)

    노란색은 Z-INDEX 가 10이 되겠죠(z-index:10)

     

    오른쪽)

    파란색은 Z-INDEX 가 10이고

    노란색은 Z-INDEX 가 1이 되겠죠

  • ? ?

    감사 합니다 그럼 이게 이미지에만 해당이 되는것인가요 ...?
    그리고 숫자가 10 단위로 올라가는 것인가요 ...?

    왼쪽하고 오른쪽하고도 위치에 따라서 숫자가 달라지는가요 

  • ? ?

    숫자는 예시로 넣은겁니다. 1과 2로 잡으셔도 상관없어요.
    단, 차이가 많이 날수록 영향력이 커지기 때문에 가급적이면 차이나도록 넣으시길 바랍니다.

    Z-INDEX는 이미지뿐만 아니라 모든 객체에 사용이 되구요

    주로 이미지나 레이어쪽에 사용합니다.

  • ? ?
    감사 합니다 저는 이게 제가 안해봐서 잘 이해가 안가는군요 ㅎㅎㅎ
    머리가 안좋아서 ㅠㅠ
    아무튼 너무나도 감사합니다 ^^;;;
  • Lv36

    기본적인 개념은 윗분이 잡아주셨는데, 가까운 곳에 있는 태그들끼리는 쉽게 적용이 되지만 소속이 다른 태그는 순서 맞추기가 쉽지 않습니다. 자신의 z-index뿐 아니라 부모 태그의 z-index에도 영향을 받으니까요. position: absolute로 위치를 맞춰 놓으면 그것도 또 따로 놀더군요 ㅡ.ㅡ 만약 의도하는 순서대로 나오지 않는다면 부모 태그 또는 position의 문제일 가능성이 높습니다.

     

    z-index가 같은 태그들은 그냥 소스에 나오는 순서대로 차곡차곡 쌓입니다. 맨 뒤로 보내고 싶으면 -1, -10 등의 음수를 넣어도 되고요. 아무리 높여도 안 되면 확 그냥 1억 정도로 높여 버리기도 합니다 ㅋㅋ (대부분의 브라우저가 32비트이므로 21억 이상의 값은 사용할 수 없다고 하네요.)

  • Lv36 ?
    기진곰님이 알려주신것은 더 고난위도의 내용 입니다 ㅠㅠ
  • ? Lv36

    혹시 포토샵이나 일러스트를 써보셨다면 레이어 순서라고 생각하시면 편합니다.

    레이어들을 이리저리 묶어놓고 순서 바꾸다 보면 머리아파지죠 ㅋㅋ

  • Lv16
    모든 엘레먼트에 대상이 되지만,
    그 대상의 position이 relative, fixed, absolute에서만 동작하며, static에는 반영되지 않습니다.
  • Lv5

    z-index는 영어의 뜻되로 Z-색인

    3차원에서 사용하는 Z축을 의미합니다.

    x-y-z-axis1.png

     

    각 엘리멘트 요소들이 동일한 2 차원 공간을 공유 할 때 다른 요소들의 앞이나 뒤에 나타나는

    레이어 순서라고 볼 수 있습니다.

     

  • Lv5 ?
    요것을 보니 어느정도 약간 감이 옵니다 ㅎㅎ
    감사합니다
  • ? Lv3

    580px-Body_painting_-_z-index.jpg

    z-index 를 모두 -1로 두면 성별을 알 수 있게 돼요~

  • ? Lv3 ?
    헉~~~~ 뭔가 심오한 뭔가가 그 뭐시아 그그그 ~!~~~ 알것도 같아요 ㅋㅋ
    감사 합니다
  • ? Lv3 Lv4
    ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㄴㅋ