ट्रांसफ़ॉर्म (रोटेट) सेट करके z- इंडेक्स रद्द कर दिया जाता है

Question 1

ट्रांसफ़ॉर्मिंग प्रॉपर्टी का उपयोग करते हुए, z- इंडेक्स को रद्द कर दिया जाता है और सामने दिखाई देता है। (जब टिप्पणी करते हैं -webkit- परिवर्तन, z- इंडेक्स ठीक से नीचे कोड में काम कर रहा है)

.test {
  width: 150px;
  height: 40px;
  margin: 30px;
  line-height: 40px;
  position: relative;
  background: white;
  -webkit-transform: rotate(10deg);
}

.test:after {
  width: 100px;
  height: 35px;
  content: "";
  position: absolute;
  top: 0;
  right: 2px;
  -webkit-box-shadow: 0 5px 5px #999;
  /* Safari and Chrome */
  -webkit-transform: rotate(3deg);
  /* Safari and Chrome */
  transform: rotate(3deg);
  z-index: -1;
}

<html>

<head>
  <title>transform</title>
  <link rel="stylesheet" type="text/css" href="transformtest.css">
</head>

<body>
  <div class="test">z-index is canceled.</div>
</body>

</html>

स्निपेट का विस्तार करें

ट्रांसफॉर्म और जेड-इंडेक्स एक साथ कैसे काम करते हैं?

Question 2

जो हो रहा है, उससे चलो। शुरू करने के लिए, ध्यान दें कि z-indexतैनात तत्वों पर और transformखुद नए " स्टैकिंग संदर्भों " का निर्माण करें " । यहाँ क्या हो रहा है:

आपके .testतत्व ने transformकुछ नहीं के अलावा कुछ और के लिए सेट किया है, जो इसे अपना स्वयं का स्टैकिंग संदर्भ देता है।

फिर आप एक .test:afterछद्म तत्व जोड़ते हैं , जो कि एक बच्चा है .test। इस बच्चे के पास z-index: -1, सेटिंग के .test:after स्टैकिंग संदर्भ.test के भीतर के स्टैक स्तर को सेट z-index: -1करने के लिए .test:afterइसे पीछे नहीं रखा जाता है .testक्योंकि z-indexकेवल एक दिए गए स्टैकिंग संदर्भ के भीतर अर्थ होता है।

जब आप को दूर -webkit-transformसे .testवह अपने स्टैकिंग संदर्भ निकाल देता है, के कारण .testऔर .test:afterस्टैकिंग संदर्भ साझा करने के लिए (के उस <html>) और बनाने .test:afterजाने के पीछे .test। ध्यान दें कि हटाने के बाद .testके -webkit-transformशासन आप, एक बार फिर, यह अपने आप ही स्टैकिंग संदर्भ एक नया सेट करके दे सकते हैं z-indexपर शासन (किसी भी कीमत).test (फिर से, क्योंकि यह स्थिति में है)!

तो हम आपकी समस्या का समाधान कैसे करेंगे?

Z- इंडेक्स को आपके द्वारा अपेक्षित तरीके से काम करने के लिए, सुनिश्चित करें कि .testऔर .test:afterउसी स्टैकिंग प्रसंग को साझा करें। समस्या यह है कि आप .testपरिवर्तन के साथ घूमना चाहते हैं , लेकिन ऐसा करने का अर्थ है अपना स्वयं का स्टैकिंग संदर्भ बनाना। सौभाग्य से, .testएक रैपिंग कंटेनर में रखने और घूर्णन जो अभी भी अपने बच्चों को दोनों को घुमाने के दौरान एक स्टैकिंग संदर्भ साझा करने की अनुमति देगा।

यहाँ आप के साथ क्या शुरू किया है: http://jsfiddle.net/fH64Q/
और यहां एक तरीका है कि आप स्टैकिंग-संदर्भों के आसपास पहुंच सकते हैं और रोटेशन को ध्यान में रख सकते हैं (ध्यान दें कि छाया .testसफेद पृष्ठभूमि के कारण थोड़ी कट जाती है ):

.wrapper {
    -webkit-transform: rotate(10deg);
}
.test {
       width: 150px;
       height: 40px;
       margin: 30px;
       line-height: 40px;
       position: relative;
       background: white;
}
.test:after {
       width: 100px;
       height: 35px;
       content: "";
       position: absolute;
       top: 0;
       right: 2px;
       -webkit-box-shadow: 0 5px 5px #999; /* Safari and Chrome */
       -webkit-transform: rotate(3deg); /* Safari and Chrome */
       transform: rotate(3deg);
       z-index: -1;
}

<div class="wrapper">
    <div class="test">z-index is canceled.</div>
</div>

स्निपेट का विस्तार करें

ऐसा करने के अन्य तरीके हैं, बेहतर तरीके भी। मैं संभवतः "एल्ट-इट" बैकग्राउंड एलीमेंट बनाऊंगा और फिर टेक्स्ट को अंदर डालूंगा, जो कि शायद सबसे आसान तरीका होगा और आपके पास जो कुछ भी है उसकी जटिलता को कम करेगा।

की जाँच करें इस लेख के बारे में अधिक जानकारी के लिए z-indexऔर व्यवस्था क्रम, या संदर्भ स्टैकिंग पर काम कर W3C CSS3 कल्पना

Question 3

उस div को सेट करें जिसे आप शीर्ष पर रहना चाहते हैं position:relative

Question 4

एक ऐसी ही समस्या जहां भाई बहन जा रहे थे था transform: translate()'घ और z-indexकाम नहीं होता।

सबसे सीधा समाधान है कि position: relativeसभी भाई-बहनों को सेट किया जाए, फिर z-indexकाम करेंगे।

Question 5

त्वरित सुधार: आप अन्य तत्व को 0 डिग्री तक भी घुमा सकते हैं।

Question 6

मैं भी इसी तरह की समस्या का सामना कर रहा था। मैंने जो किया था, मैंने परीक्षण के चारों ओर एक रैपर div जोड़ा और रैपर div को संपत्ति को बदल दिया।

.wrapper{
    transform: rotate(10deg);
}

यहाँ fiddle http://jsfiddle.net/KmnF2/16/ है

Question 7

उस div को सेट करें जिसे आप शीर्ष स्थान पर रहना चाहते हैं: निरपेक्ष