জেড-ইনডেক্স রূপান্তর (ঘোরানো) সেট করে বাতিল করা হয়েছে

Question 1

রূপান্তর সম্পত্তি ব্যবহার করে, জেড-সূচক বাতিল হয়ে যায় এবং সামনে উপস্থিত হয়। (ওয়েবেকিট-ট্রান্সফর্মের বাইরে মন্তব্য করার সময়, জেড-ইনডেক্স সঠিকভাবে নীচের কোডে কাজ করছে)

.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(আবার, কারণ এটি অবস্থান রয়েছে) সেট করে এটির নিজস্ব স্ট্যাকিং প্রসঙ্গটি দিতে পারেন !

তাহলে আমরা কীভাবে আপনার সমস্যার সমাধান করব?

জেড-ইনডেক্সটি আপনার প্রত্যাশা অনুযায়ী কাজ করার জন্য এটি নিশ্চিত করুন .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 এর সিএসএস 3 বৈশিষ্ট

Question 3

আপনি উপরে থাকতে চান ডিভ সেট করুন position:relative

Question 4

একই রকম সমস্যা ছিল যেখানে ভাইবোনদের transform: translate()'ডি' করা হচ্ছে এবং z-indexতারা কাজ করবে না।

সর্বাধিক সরল সমাধান হ'ল position: relativeসমস্ত ভাইবোনকে সেট করা, তারপরে z-indexআবার কাজ করবে।

Question 5

দ্রুত ফিক্স: আপনি 0 ডিগ্রি দ্বারা অন্যান্য উপাদানটিও ঘোরতে পারেন।

Question 6

আমি একই সমস্যার মুখোমুখি ছিলাম। আমি যা করেছি তা হল, আমি পরীক্ষার চারপাশে একটি মোড়ক ডিভি যুক্ত করেছি এবং র্যাপার ডিভকে রূপান্তর সম্পত্তি দিয়েছি।

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

এখানে টিউমারটি http://jsfiddle.net/KmnF2/16/

Question 7

আপনি শীর্ষে অবস্থান করতে চান ডিভ সেট করুন: পরম