জেড-ইনডেক্স কেন কাজ করে না?

Question

সুতরাং আমি যদি z-indexসঠিকভাবে বুঝতে পারি তবে এটি এই পরিস্থিতিতে নিখুঁত হবে:

আমি নীচের চিত্রটি (ট্যাগ / কার্ড) এর উপরে ডিভের নীচে রাখতে চাই। সুতরাং আপনি ধারালো প্রান্ত দেখতে পাচ্ছেন না। আমি এটা কিভাবে করবো?

z-index:-1 // on the image tag/card

অথবা

z-index:100 // on the div above

কাজ করে না। উভয়ই এর মতো কোনও কিছুর সমন্বয় করে না। কিভাবে?

Answer 1

z-indexসম্পত্তি মাত্র উপাদানের উপর কাজ করে positionআর অন্য মান static(যেমন position: absolute;, position: relative;অথবা position: fixed)।

রয়েছে position: sticky;যে ফায়ারফক্স সমর্থিত, সাফারিতে পূর্বে সমাধান করা হয়, একটি কাস্টম পতাকা অধীনে Chrome- এর পুরোনো সংস্করণগুলি কোনো সময়ের জন্য কাজ করেন, এবং মাইক্রোসফট দ্বারা বিবেচনাধীন রয়েছে তাদের এজ ব্রাউজারে যোগ করা হবে।

গুরুত্বপূর্ণ
নিয়মিত পজিশনিংয়ের জন্য, position: relativeআপনি যে উপাদানগুলিকে সেট করেছেন সেগুলিতে অন্তর্ভুক্ত করতে ভুলবেন না z-index। অন্যথায়, এটি কার্যকর হবে না।

Comments

এটি তৈরি করতে অন্যান্য কারণের উপরও নির্ভর করে Stacking Context।

— আজাক্স

এই উত্তরে যোগ করা, ক্রোম এবং সম্ভবত এই লেখার মতো অন্যান্য ব্রাউজারগুলির position: relativeজন্য ডিফল্টরূপে অন্যান্য আপেক্ষিক উপায়ে আচরণ করার উপাদান থাকা সত্ত্বেও আপনি স্পষ্টতই জেড-ইনডেক্সের জন্য কাজ করতে চান

— বেনিপসেন

staticউপাদান স্থিতিশীল এবং চারপাশে ঘোরাঘুরি করতে পারে না x, y or z planes। আমরা যখন কাজ করি তখন তারা প্রবেশ করতে x plane (left or right)বা y plane (top or bottom)পছন্দ করতে পারে না position: absolute। আর না তারা স্থানান্তর করতে পারেন z plane i.e. with z-index।

— আকাশ

আপনি z-indexগ্রিড উপাদান ব্যবহার করে কোন সমস্যা সম্পর্কে সচেতন ??

— oldboy

Answer 2

আপনি যদি অন্য মানটিতে অবস্থান নির্ধারণ করেন staticতবে আপনার উপাদানটি z-indexএখনও কাজ করে না বলে মনে হয়, কিছু পিতামন্ডল উপাদান z-indexসেট করে থাকতে পারে ।

স্ট্যাকিং প্রসঙ্গে হায়ারার্কি থাকে এবং প্রতিটি স্ট্যাকিং প্রসঙ্গে পিতামাতার স্ট্যাকিং প্রসঙ্গে স্ট্যাকিং ক্রম হিসাবে বিবেচনা করা হয়।

নিম্নলিখিত নিম্নলিখিত এইচটিএমএল সঙ্গে

div { border: 2px solid #000; width: 100px; height: 30px; margin: 10px; position: relative; background-color: #FFF; }
#el3 { background-color: #F0F; width: 100px; height: 60px; top: -50px; }

<div id="el1" style="z-index: 5"></div>
<div id="el2" style="z-index: 3">
  <div id="el3" style="z-index: 8"></div>
</div>

কোন ব্যাপার কিভাবে বড় z-indexএর el3সেট করা হবে, এটা সবসময় অধীনে হতে হবে el1, কারণ এটি এর অভিভাবক নিম্ন স্ট্যাক প্রসঙ্গে হয়েছে। আপনি মাত্রা যেমন অর্ডার সারিবদ্ধ যেখানে অর্ডার সারিবদ্ধ এর কল্পনা করতে পারেন el3আসলে 3.8 যা কম 5 ।

আপনি যদি পিতামাতার উপাদানগুলির স্ট্যাকিং প্রসঙ্গটি পরীক্ষা করতে চান তবে আপনি এটি ব্যবহার করতে পারেন:

var el = document.getElementById("#yourElement"); // or use $0 in chrome;
do {
    var styles = window.getComputedStyle(el);
    console.log(styles.zIndex, el);
} while(el.parentElement && (el = el.parentElement));

এমডিএন-তে প্রসঙ্গ স্ট্যাকিং সম্পর্কে একটি দুর্দান্ত নিবন্ধ রয়েছে

Comments

কীভাবে ঠিক করব?

— এসএম নাট

মূল উপাদানগুলির যথাযথ জেড-সূচক সেট করুন

— বুকসি 11

সেই স্ক্রিপ্টটি

— ভালোবাসুন

Answer 3

আপনার উপাদানগুলির একটি positionবৈশিষ্ট্য থাকা দরকার। (যেমন absolute, relative, fixed) অথবা z-indexনা করবে না হবে।

Answer 4

অনেক ক্ষেত্রে কোনও উপাদানকে z-indexকাজ করার জন্য অবস্থান করতে হবে ।

প্রকৃতপক্ষে, position: relativeপ্রশ্নের উপাদানগুলিতে প্রয়োগ করা সমস্যার সমাধান করবে সম্ভবত (তবে নিশ্চিতভাবে জানতে যথেষ্ট কোড সরবরাহ করা হয়নি)।

আসলে, position: fixed, position: absoluteএবং position: stickyএছাড়াও সক্ষম করবে z-index, কিন্তু সেসব মান এছাড়াও বিন্যাস পরিবর্তন করুন। position: relativeলেআউটটি বিরক্ত হয় না সঙ্গে ।

মূলত, যতক্ষণ না উপাদানটি position: static(ডিফল্ট সেটিংস) না থাকে ততক্ষণ এটি অবস্থান হিসাবে বিবেচিত হয় এবং z-indexকাজ করবে।

---

"জেড-ইনডেক্স কেন কাজ করছে না?" এর অনেক উত্তর ? প্রশ্নগুলি দৃsert়ভাবে জানায় যে z-index কেবলমাত্র অবস্থানের উপাদানগুলিতে কাজ করে। সিএসএস 3 হিসাবে এটি আর সত্য নয়।

উপাদানসমূহ যে আনমন আইটেম বা গ্রিড আইটেম ব্যবহার করতে পারেন z-index, এমনকি যখন positionহয় static।

চশমা থেকে:

4.3। ফ্লেক্স আইটেম জেড-অর্ডারিং

ফ্লেক্স আইটেমগুলি হ'ল ইনলাইন ব্লকগুলির মতো হুবহু চিত্র আঁকায়, ব্যতীত অর্ডার-সংশোধিত ডকুমেন্ট অর্ডারটি কাঁচা ডকুমেন্ট অর্ডারের জায়গায় ব্যবহার করা হয় এবং স্ট্যাকিং প্রসঙ্গ তৈরি করা বাদে z-indexঅন্য মানগুলি হয় ।autopositionstatic

5.4। জেড-অক্ষস অর্ডারিং: z-indexসম্পত্তি

গ্রিড আইটেমগুলির পেইন্টিং অর্ডার হ'ল ইনলাইন ব্লকগুলির সমান, কেবলমাত্র সেই অর্ডার-সংশোধিত ডকুমেন্ট অর্ডারটি কাঁচা ডকুমেন্ট অর্ডারের জায়গায় ব্যবহার করা হয় এবং স্ট্যাকিং প্রসঙ্গ তৈরি করা z-indexছাড়াও অন্য মানগুলি হয় ।autopositionstatic

এখানে z-indexঅবস্থানবিহীন নমনীয় আইটেমগুলিতে কাজ করার একটি প্রদর্শন রয়েছে : https://jsfiddle.net/m0wddwxs/

Comments

"ফ্লেক্স আইটেম বা গ্রিড আইটেম এমন উপাদানগুলি স্থিতিশীল থাকা সত্ত্বেও জেড-ইনডেক্স ব্যবহার করতে পারে" " হ্যাঁ, স্পেসটি মূলত position: staticঠিক একইরকম আচরণ করার জন্য বলেছে যেহেতু এই position: relativeবিন্যাসের পদ্ধতিগুলির গতিশীল প্রকৃতির কারণে এটি ফ্লেক্স এবং গ্রিড আইটেমগুলির জন্য চিকিত্সা করবে । সুতরাং আমি সম্ভবত এটি বলব যে এটি সিএসএস 3 এ আর সত্য নয় যে কোনও উপাদানকে অবস্থান করা দরকার, তবে CSS3 ফ্লেক্স এবং গ্রিড আইটেমগুলিকে যেমন নির্ধারিত, নির্বিশেষে আচরণ করে। একই জিনিসটি দেখার কেবল দুটি উপায়, যদিও সম্ভবত।

— টাইলার এইচ

@ টাইলারএইচ-এর অংশটির প্রতি আমাদের মনোযোগ দেওয়া উচিত কারণ কেবল জেড-ইনডেক্সের সাথে ডিল করার সময় আমাদের স্থির হিসাবে একইরকম আচরণ করা উচিত এবং সাধারণভাবে নয়। আপনি উদাহরণস্বরূপ স্পিফার না করলে আপনি উদাহরণস্বরূপ বাম / উপরে / নীচে / ডান ব্যবহার করে একটি ফ্লেক্স আইটেমটি স্থানান্তর করতে পারবেন না position:relative। নিখুঁত অবস্থান সহ ফ্লেক্স আইটেমের বংশধরগণ ফ্লেক্স আইটেমটিকে তাদের ধারণকৃত ব্লক হিসাবে বিবেচনা করবেন না কারণ ফ্লেক্স আইটেমটি অবস্থানযুক্ত নয়। ( jsfiddle.net/0yo7utfL/2 )

— তেমনী আফিফ

আমি CSS সহ একটি বিভক্ত "বাগ" পেয়েছি। কোনও কারণে কাজ করা থেকে overflow-y: scrollবাধা দেয় overflow-x: visible... আপনি কি দয়া করে একবার দেখে নিতে পারেন?

— oldboy