z- সূচক পজিশনের সাথে কাজ করছে না

Question

আমি কনসোলটি (ক্রোম-ফায়ারফক্স) খুললাম এবং নিম্নলিখিত লাইনগুলি চালিত করেছি:

$("body").append("<div id=\"popupFrame\" style=\"width:100%;height:100%;background-color:black;opacity:0.5;position:absolute;top:0;left:0;z-index:1;\" />");
$("body").append("<div id=\"popupContent\" style=\"width:200px;height:200px;z-index:1000;background-color:white;\" >dasdasdsadasdasdasdasdasd</div>");

# পপআপ কনটেন্টটি সর্বোপরি হওয়া উচিত তবে এটি # পপআপ ফ্রেম অস্বচ্ছতার দ্বারা প্রভাবিত।

বিষয়টিকে # পপআপ ফ্রেমে অন্তর্ভুক্ত নেই যা এটিকে খুব অদ্ভুত করে তোলে।

লক্ষ্যটি হ'ল সতর্কতা বাক্সের মতো ফায়ারফক্স তৈরি করা

Answer 1

দ্বিতীয় ডিভটি position: static(ডিফল্ট) তাই জেড-সূচক এটি প্রয়োগ করে না to

আপনার অবস্থান প্রয়োজন (অবস্থানের সম্পত্তি ব্যতীত অন্য কোনও ক্ষেত্রে সেট করুন staticrelative কিছু দিতে চান আপনি সম্ভবত এই ক্ষেত্রে চান ) z-index।

Answer 2

অস্বচ্ছতা আপনার জেড-ইনডেক্সের প্রসঙ্গকে পরিবর্তন করে, স্থির অবস্থানের মতো করে। হয় যে উপাদানটি নেই তার সাথে অস্বচ্ছতা যুক্ত করুন বা যে উপাদানটি রয়েছে তা থেকে এটি সরান। আপনাকে উভয় উপাদানকে স্থিতিশীল করা বা আপেক্ষিক বা পরম অবস্থান নির্দিষ্ট করতে হবে। এখানে প্রেক্ষিতে কিছু পটভূমি আছে: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Comments

কি দারুন. নিবন্ধ অনুসারে, এতে অস্বচ্ছতা, "ট্রান্সফর্মস, ফিল্টারস, সিএসএস-অঞ্চলসমূহ, পেজযুক্ত মিডিয়া এবং সম্ভবত অন্যান্য রয়েছে" "

— jchook

Answer 3

পুরানো প্রশ্ন তবে এই উত্তরটি কারওর পক্ষে সহায়তা করতে পারে।

আপনি যদি ধারকটির সীমানার বাইরে পাত্রে থাকা সামগ্রীগুলি প্রদর্শন করার চেষ্টা করছেন তবে নিশ্চিত হয়ে নিন যে এতে নেই overflow:hidden, অন্যথায় এর বাইরের কিছু কেটে যাবে।

Answer 4

z-indexকেবল সেই উপাদানগুলিতে প্রযোজ্য যেগুলিকে একটি স্পষ্ট অবস্থান দেওয়া হয়েছে। যোগ position:relative#popupContent এবং আপনি যেতে ভাল হওয়া উচিত।

Answer 5

ব্যবহার করার সময় position: absolute;আমি এই সমস্যার মুখোমুখি হয়েছি position: relative, শিশু উপাদান ব্যবহার করে আমি এই সমস্যার মুখোমুখি হয়েছি । পরিবর্তন করার প্রয়োজন হবে না position: absoluteকরতে relative, শুধু দুটি উদাহরণ তলদেশে মধ্যে সন্তান উপাদান চেহারা যোগ করতে হবে:

let toggle = document.getElementById('toggle')

toggle.addEventListener("click", () => {
 toggle.classList.toggle('change');
})

.container {
  width: 60px;
  height: 22px;
  background: #333;
  border-radius: 20px;
  position: relative;
  cursor: pointer;

}

.change .slide {
  transform: translateX(33px);
}

.slide {
  transition: 0.5s;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 20px;
  margin: 2px 2px;
  z-index: 100;
}

.dot {
  width: 10px;
  height: 16px;
  background: red;
  position: absolute;
  top: 4px;
  right: 5px;
  z-index: 1;
}

<div class="container" id="toggle">
  <div class="slide"></div>
  <div class="dot"></div>
</div>

অবস্থান সম্পর্কিত আপেক্ষিক ব্যবহার করে এটি ঠিক করা যায়:

let toggle = document.getElementById('toggle')

toggle.addEventListener("click", () => {
 toggle.classList.toggle('change');
})

.container {
  width: 60px;
  height: 22px;
  background: #333;
  border-radius: 20px;
  position: relative;
  cursor: pointer;

}

.change .slide {
  transform: translateX(33px);
}

.slide {
  transition: 0.5s;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 20px;
  margin: 2px 2px;
  z-index: 100;
  
  // Just add position relative;
  position: relative;
}

.dot {
  width: 10px;
  height: 16px;
  background: red;
  position: absolute;
  top: 4px;
  right: 5px;
  z-index: 1;
}

<div class="container" id="toggle">
  <div class="slide"></div>
  <div class="dot"></div>
</div>

স্যান্ডবক্স এখানে