422

আমার একটি divডিফল্ট অবস্থান (যেমন position:static) এবং divএকটি fixedপজিশন সহ রয়েছে।

যদি আমি উপাদানগুলির জেড-সূচকগুলি সেট করি তবে স্থির উপাদানটিকে স্থির উপাদানের পিছনে ফেলে রাখা অসম্ভব বলে মনে হচ্ছে।

    #over {
      width: 600px;
      z-index: 10;
    }
    
    #under {
      position: fixed;
      top: 5px;
      width: 420px;
      left: 20px;
      border: 1px solid;
      height: 10%;
      background: #fff;
      z-index: 1;
    }

    <!DOCTYPE html>
    <html>
       <body>
          <div id="over">
             Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
          </div>  
          <div id="under">
          </div>
       </body>
    </html>

স্নিপেট প্রসারিত করুন

বা জেএসফিডে এখানে: http://jsfiddle.net/mhFxf/

আমি position:absolute স্থির উপাদান ব্যবহার করে এটিকে ঘিরে কাজ করতে পারি তবে কেউ কি আমাকে বলতে পারে যে এটি কেন হচ্ছে?

( এটির সাথে একই প্রশ্ন রয়েছে বলে মনে হয়, ( স্থির অবস্থান নির্ধারণকারী জেড-ইনডেক্স )) তবে এর সন্তোষজনক উত্তর নেই, তাই আমি এখানে আমার উদাহরণ কোডটি দিয়ে জিজ্ঞাসা করছি)

css z-index

— DanSingerman
সূত্র

146

এই প্রশ্নটি বেশ কয়েকটি উপায়ে সমাধান করা যেতে পারে তবে সত্যিকার অর্থে, স্ট্যাকিংয়ের নিয়মগুলি জানলে আপনি আপনার পক্ষে সেরা উত্তরটি সন্ধান করতে পারবেন।

সলিউশন

<html>উপাদান আপনার একমাত্র স্ট্যাক প্রসঙ্গে, তাই শুধু একটি স্ট্যাক প্রসঙ্গে ভিতরে সারিবদ্ধ নিয়ম অনুসরণ এবং আপনি সেই উপাদান এই অনুক্রমে সজ্জিত হয় দেখতে হবে

স্ট্যাকিং প্রসঙ্গে মূল উপাদান ( <html>এই ক্ষেত্রে উপাদান)

নেতিবাচক জেড-ইনডেক্স মান সহ অবস্থিত উপাদানগুলি (এবং তাদের শিশুরা) (উচ্চতর মানগুলি নিম্ন মানের সামনে সজ্জিত থাকে; একই মানযুক্ত উপাদানগুলি এইচটিএমএলের উপস্থিতি অনুসারে স্ট্যাক করা হয়)

অবস্থানহীন উপাদান (এইচটিএমএল উপস্থিতির দ্বারা অর্ডার করা)

অটো-এর একটি জেড-ইনডেক্স মান সহ এইচটিএমএল উপাদানগুলি (এবং তাদের শিশুদের) (এইচটিএমএলে উপস্থিতির দ্বারা আদেশ করা)

পজিটিভ জেড-ইনডেক্স মান সহ অবস্থিত উপাদানগুলি (এবং তাদের শিশুরা) (উচ্চতর মানগুলি নিম্ন মানের সামনে স্তুপীকৃত থাকে; একই মানযুক্ত উপাদানগুলি HTML এর উপস্থিতি অনুসারে স্ট্যাক করা হয়)

তাই আপনি যা করতে পারেন

জে-ইনডেক্স- #underঅবস্থানবিহীন #overউপাদানের পিছনে উপস্থিত- জেড-সূচকের জন্য -1 এর একটি জেড সূচক সেট করুন
অবস্থান সেট #overকরতে relativeযাতে নিয়ম 5 এটা প্রযোজ্য

রিয়েল সমস্যা

উপাদানগুলির স্ট্যাকিং ক্রমটি পরিবর্তন করার চেষ্টা করার আগে বিকাশকারীদের নিম্নলিখিতগুলি জানা উচিত।

যখন একটি স্ট্যাকিং প্রসঙ্গ গঠন করা হয়
- ডিফল্টরূপে, <html>উপাদানটি মূল উপাদান এবং এটি প্রথম স্ট্যাকিং প্রসঙ্গ
স্ট্যাকিং প্রসঙ্গে স্ট্যাকিং অর্ডার

নীচে স্ট্যাকিং অর্ডার এবং স্ট্যাকিং প্রসঙ্গের নিয়মগুলি এই লিঙ্কটি থেকে

যখন একটি স্ট্যাকিং প্রসঙ্গ গঠন করা হয়

যখন একটি উপাদান নথির মূল উপাদান হয় ( <html>উপাদান)
যখন কোনও উপাদানের স্ট্যাটিক ব্যতীত অবস্থানের মান থাকে এবং অটো ছাড়াও জেড-ইনডেক্স মান থাকে
যখন কোনও এলিমেন্টের অস্বচ্ছ মান 1 এর চেয়ে কম থাকে
বেশ কয়েকটি নতুন সিএসএস বৈশিষ্ট্য স্ট্যাকিং প্রসঙ্গও তৈরি করে। এর মধ্যে রয়েছে: ট্রান্সফর্ম, ফিল্টার, সিএসএস-অঞ্চল, পেজযুক্ত মিডিয়া এবং সম্ভবত অন্য। https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
একটি সাধারণ নিয়ম হিসাবে, মনে হয় কোনও সিএসএস সম্পত্তি যদি কোনও অফস্ক্রিন প্রসঙ্গে রেন্ডারিংয়ের প্রয়োজন হয় তবে এটি অবশ্যই একটি নতুন স্ট্যাকিং প্রসঙ্গ তৈরি করবে।

স্ট্যাকিং প্রসঙ্গে স্ট্যাকিং অর্ডার

উপাদানগুলির ক্রম:

স্ট্যাকিং প্রসঙ্গের মূল উপাদান ( <html>উপাদানটি কেবলমাত্র ডিফল্টরূপে স্ট্যাকিং প্রসঙ্গ হয়, তবে কোনও উপাদান স্ট্যাকিং প্রসঙ্গে একটি মূল উপাদান হতে পারে, উপরের নিয়মগুলি দেখুন)
- আপনি কোনও মূল উপাদানকে মূলের স্ট্যাকিং প্রসঙ্গ উপাদানটির পিছনে রাখতে পারবেন না
নেতিবাচক জেড-ইনডেক্স মান সহ অবস্থিত উপাদানগুলি (এবং তাদের শিশুরা) (উচ্চতর মানগুলি নিম্ন মানের সামনে সজ্জিত থাকে; একই মানযুক্ত উপাদানগুলি এইচটিএমএলের উপস্থিতি অনুসারে স্ট্যাক করা হয়)
অবস্থানহীন উপাদান (এইচটিএমএল উপস্থিতির দ্বারা অর্ডার করা)
অটো-এর একটি জেড-ইনডেক্স মান সহ এইচটিএমএল উপাদানগুলি (এবং তাদের শিশুদের) (এইচটিএমএলে উপস্থিতির দ্বারা আদেশ করা)
পজিটিভ জেড-ইনডেক্স মান সহ অবস্থিত উপাদানগুলি (এবং তাদের শিশুরা) (উচ্চতর মানগুলি নিম্ন মানের সামনে স্তুপীকৃত থাকে; একই মানযুক্ত উপাদানগুলি HTML এর উপস্থিতি অনুসারে স্ট্যাক করা হয়)

— Mr_Moneybags
সূত্র

3

কারও কারও কাছে এটি সহায়ক হতে পারে: জেড-ইনডেক্স সম্পর্কে কেউ আপনাকে কী বলে না

— মানসিকবিদ

450

position: relative;# ওভারে যোগ করুন

    #over {
      width: 600px;
      z-index: 10;
      position: relative;    
    }
    
    #under {
      position: fixed;
      top: 5px;
      width: 420px;
      left: 20px;
      border: 1px solid;
      height: 10%;
      background: #fff;
      z-index: 1;
    }

    <!DOCTYPE html>
    <html>
    <body>
    	<div id="over">
    		Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
    	</div>  
    
    	<div id="under"></div>
    </body>
    </html>

স্নিপেট প্রসারিত করুন

বেহালা

— stephenmurdoch
সূত্র

14

আপডেট.html5rocks.com/2012/09/… অবস্থানটি কীভাবে স্থির, নিরঙ্কুশ এবং আপেক্ষিকভাবে জেড-ইনডেক্সের সাথে যোগাযোগ করে তার একটি দুর্দান্ত রেফারেন্স।

— কি

আমার পছন্দ বিটিডব্লিউ, আপনার ফ্রিডল একবার দেখুন শেষে একটি অতিরিক্ত ট্যাগ </body>এবং একটি অতিরিক্ত ট্যাগ </html>রয়েছে।

— মিশেল আইরেস

2

এখানে মজাদার স্ট্যাকিং প্রসঙ্গটি দেখানো হচ্ছে । এটি এখানে ব্যাখ্যা করা হয়েছে ।

— kdbanman

position: relativeঅতিরিক্ত উপাদান থেকে সরানো আসলে আমার সমস্যাটি স্থির করেছে।

— অ্যালেক্স জি

থ্যাঙ্কসস এসএসএস <3

— কার্ল অ্যান্টনি বাল্যওট

32

z-index শুধুমাত্র একটি নির্দিষ্ট প্রসঙ্গে যেমন relative, fixedবা absoluteঅবস্থানের মধ্যে কাজ করে।

আপেক্ষিক ডিভের জন্য জেড-ইনডেক্সের কোনও সম্পর্ক নেইz-index একেবারে বা স্থির ডিভের ।

সম্পাদনা ~~এটি একটি অসম্পূর্ণ উত্তর।~~ এই উত্তরটি ভুল তথ্য সরবরাহ করে। দয়া করে @ ড্যানসিঞ্জারম্যানের মন্তব্য এবং নীচের উদাহরণটি পর্যালোচনা করুন।

— cusimar9
সূত্র

3

আপনি কীভাবে জেড-ইনডেক্স কোনও নির্দিষ্ট প্রসঙ্গে কাজ করতে পারেন এবং / অথবা একটি রেফারেন্স সরবরাহ করতে পারেন?

— ড্যানসিংগারম্যান

13

জেড-ইনডেক্স দুটি ডিভের ক্রমকে প্রভাবিত করে এমনকি যদি একটি অবস্থান সম্পর্কিত হয় এবং অন্যটি পরম হয় is

— রাফেল

65

এই উত্তরটি ভুল। এখানে একটি বেহালার হয় প্রদর্শক স্ট্যাক প্রসঙ্গে যেমন ব্যাখ্যা করা হয় এখানে । @Dansingerman।

— kdbanman

1

আপনার জিএসফিডাল @ কেবিড্যানম্যানের জন্য ধন্যবাদ, এটি আমাকে ভিজ্যুয়াল সহ স্ট্যাকিং প্রসঙ্গে বুঝতে সহায়তা করেছে।

— ধ্রুবপেটেল

8

@ জোমোরানো, নিখুঁত বা আপেক্ষিক অবস্থান নির্বিশেষে উচ্চতর z শীর্ষের নিকটে রয়েছে। কী গুরুত্বপূর্ণ তা নথির গাছের স্তর। ডিভস 4, 5, 6 ডিভ 3 এর 3 বাচ্চা, যখন ডিভ 1 এবং 2 ডিভ 3 এর ভাইবোন Div ডিভ 1 এর 3 ডি 3 এর চেয়ে বেশি জেড থাকে, তাই ডিভ 1 ডিভ 3 এর শীর্ষে এবং এর সমস্ত শিশু রয়েছে। ডিভ 2 এর 3

— ডি

31

যেহেতু আপনার over ডিভের কোনও অবস্থান নেই, জেড-ইনডেক্সটি কোথায় এবং কীভাবে এটি অবস্থান করবে তা জানে না (এবং কী সম্পর্কিত?)। কেবলমাত্র আপনার ওভার ডিভের অবস্থানকে আপেক্ষিকভাবে পরিবর্তন করুন, সুতরাং সেই ডিভের কোনও পার্শ্ব প্রতিক্রিয়া নেই এবং তারপরে ডিভের অধীনে আপনার ইচ্ছাকে মান্য করবে।

এখানে jsfiddle আপনার উদাহরণ: ফিডল

সম্পাদনা : আমি দেখছি যে কেউ ইতিমধ্যে এই উত্তরটি উল্লেখ করেছে!

— iamserious
সূত্র

18

দিন #underএকটি নেতিবাচকz-index , যেমন-1

z-indexসম্পত্তিটি এতে উপেক্ষা করা হওয়ার কারণে এটি ঘটে position: static;, যা ডিফল্ট মান হিসাবে ঘটে; সুতরাং আপনি যে সিএসএস কোড লিখেছেন z-indexতা 1উভয় উপাদানের জন্যই হোক না কেন আপনি এটিকে কতটা উচ্চ সেট করেছেন#over ।

দিয়ে #underনেতিবাচক মান এটি যে কোনও z-index: 1;উপাদানটির পিছনে থাকবে , যেমন #over।

— কার্লোস প্রিসিওসো
সূত্র

আমারও এই সমস্যা ছিল - 'আন্ডার' ডিভ থেকে 0 সেট করা আমার পক্ষে কাজ করেছিল।

— মিক সেয়ার

5

আমি একটি এনএভি মেনু তৈরি করছিলাম। overflow: hiddenআমার নেভের সিএসএসে আমি সমস্ত কিছু লুকিয়ে রেখেছি। আমি ভেবেছিলাম এটি জেড-ইনডেক্সের সমস্যা, তবে সত্যই আমি আমার নেভের বাইরে সমস্ত কিছু গোপন করছি।

— thedanotto
সূত্র

3

যখন উপাদানগুলি স্বাভাবিক প্রবাহের বাইরে অবস্থান করে, তারা অন্যান্য উপাদানগুলিকে ওভারল্যাপ করতে পারে।

http://web.archive.org/web/20130501103219/http://w3schools.com/css/css_positioning.asp এ ওভারল্যাপিং এলিমেন্ট বিভাগ অনুযায়ী

— খোয়া এনগুইন
সূত্র

0

সিএসএস স্পেসে সংজ্ঞায়িত হিসাবে নির্দিষ্ট উপাদানগুলির (এবং পরম উপাদানসমূহ) এর আচরণ:

তারা দলিল থেকে বিচ্ছিন্ন এবং নিকটতম স্থির / নিখুঁত অবস্থানের পিতামাতার মধ্যে রাখা হিসাবে তারা আচরণ করে। (শব্দ উক্তি দ্বারা একটি শব্দ নয়)

এটি জিনডেক্স গণনাটিকে কিছুটা জটিল করে তুলেছে, আমি আমার সমস্যাটি (একই পরিস্থিতি) গতিশীলভাবে শরীরের উপাদানগুলিতে একটি ধারক তৈরি করে এবং এই জাতীয় উপাদানগুলিকে (যা শ্রেণি-এড হিসাবে "আমার-স্থির-উপাদান হিসাবে" শরীর-স্তর উপাদানটির ভিতরে নিয়ে গিয়ে সমাধান করেছি) )

— বখশী
সূত্র

z- সূচক স্থির অবস্থানের সাথে কাজ করছে না

সলিউশন

রিয়েল সমস্যা

যখন একটি স্ট্যাকিং প্রসঙ্গ গঠন করা হয়

স্ট্যাকিং প্রসঙ্গে স্ট্যাকিং অর্ডার