সিএসএস আমি চাই একটি ডিভি সব কিছুর শীর্ষে হোক
উত্তর:
জেড-ইনডেক্সের কাজ করার জন্য, আপনাকে উপাদানটি একটি position:absoluteবা একটি position:relativeসম্পত্তি দেওয়া দরকার। একবার আপনি এটি করেন, আপনার লিঙ্কগুলি সঠিকভাবে কাজ করবে, যদিও আপনাকে নিজের সিএসএসের পরে কিছুক্ষণ টুইঙ্ক করতে হতে পারে।
জন্য z-index:1000একটি প্রভাব আছে যদি আপনার নন-স্ট্যাটিক পজিশনিং স্কিম প্রয়োজন।
যোগ position:relative;উপাদান আপনি উপরে হতে চান নির্বাচন করার সময় একটি নিয়মের
হ্যাঁ, জেড-ইনডেক্সটি কাজ করার জন্য আপনাকে উপাদানটিকে একটি অবস্থান: পরম বা অবস্থান: আপেক্ষিক সম্পত্তি প্রদান করতে হবে।
তবে ... বাবা-মায়ের প্রতি মনোযোগ দিন!
সাধারণ পিতামাতার স্তরে প্রথম বংশধরদের একটি নির্ধারিত জেড-সূচক রয়েছে কিনা তা পরীক্ষা করতে আপনাকে উপাদানগুলির নোডে যেতে হবে।
বেসে যদি একটি নির্দিষ্ট জেড-ইনডেক্স থাকে তবে অন্য সমস্ত বংশধররা কখনই অগ্রভাগে থাকতে পারে না।
এই স্নিপেট উদাহরণে, Div1-2-1 এর 1000-এর জেড-সূচক রয়েছে তবে তবুও Div1-1-1 এর অধীনে যার 3 এর জেড-সূচক রয়েছে।
এটি কারণ Div1-1 এর div1-2 এর চেয়ে বেশি একটি জেড-সূচক রয়েছে।
.div {
}
#div1 {
z-index: 1;
position: absolute;
width: 500px;
height: 300px;
border: 1px solid black;
}
#div1-1 {
z-index: 2;
position: absolute;
left: 230px;
width: 200px;
height: 200px;
top: 31px;
background-color: indianred;
}
#div1-1-1 {
z-index: 3;
position: absolute;
top: 50px;
width: 100px;
height: 100px;
background-color: burlywood;
}
#div1-2 {
z-index: 1;
position: absolute;
width: 200px;
height: 200px;
left: 80px;
top: 5px;
background-color: red;
}
#div1-2-1 {
z-index: 1000;
position: absolute;
left: 70px;
width: 120px;
height: 100px;
top: 10px;
color: red;
background-color: lightyellow;
}
.blink {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
.rotate {
writing-mode: vertical-rl;
padding-left: 50px;
font-weight: bold;
font-size: 20px;
}<div class="div" id="div1">div1</br>z-index: 1
<div class="div" id="div1-1">div1-1</br>z-index: 2
<div class="div" id="div1-1-1">div1-1-1</br>z-index: 3</div>
</div>
<div class="div" id="div1-2">div1-2</br>z-index: 1</br><span class='rotate blink'><=</span>
<div class="div" id="div1-2-1"><span class='blink'>z-index: 1000!!</span></br>div1-2-1</br><span class='blink'> because =></br>(same</br> parent)</span></div>
</div>
</div>আপনাকে position:relative;মেনুতে যুক্ত করতে হবে। জেড-ইনডেক্স কেবল তখনই কাজ করে যখন আপনার অ স্থিত অবস্থান নির্ধারণের পরিকল্পনা রয়েছে।
z-indexসম্পত্তি আপনাকে সামনের দিকে আপনার নিয়ন্ত্রণ নিতে সক্ষম করে। আপনি যে বড় সংখ্যাটি পাবেন সেটিকে বড় পরিমাণে সেট করুন।
positionসম্পত্তি হওয়া উচিত relativeকারণ অবস্থানটি html-elementসমস্ত মাত্রার অন্যান্য নিয়ন্ত্রণের তুলনায় তুলনামূলকভাবে পজিশন হওয়া উচিত।
element.style {
position:relative;
z-index:1000; //change your number as per elements lies on your page.
}আমি ধরে নিলাম আপনি ডাব্লুডাব্লু 3 স্কুল থেকে কোড নিয়ে পপআপ তৈরি করছেন, তাইনা? এটি সিএসএস পরীক্ষা করে দেখুন। আধুনিক z-index। এখানে ইতিমধ্যে শব্দ আছে। শুধু 1 থেকে 100 এ পরিবর্তন করুন।
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}