Chrome 22-এ position:fixed উপাদানগুলি পূর্ববর্তী সংস্করণগুলির থেকে কিছুটা আলাদা। সমস্ত position:fixed উপাদানগুলি এখন নতুন স্ট্যাকিং প্রসঙ্গ গঠন করে। এটি কিছু পৃষ্ঠার স্ট্যাকিং ক্রম পরিবর্তন করবে, যা পৃষ্ঠা বিন্যাস ভাঙ্গার সম্ভাবনা রয়েছে। নতুন আচরণ মোবাইল ডিভাইসে (iOS Safari এবং Android এর জন্য Chrome) ওয়েবকিট ব্রাউজারগুলির আচরণের সাথে মেলে।
স্ট্যাকিং কি?
প্রত্যেকেই একটি পৃষ্ঠায় উপাদানগুলির গভীরতা ক্রম নির্ধারণের জন্য z-index জানে এবং পছন্দ করে৷ সমস্ত z-সূচী সমান তৈরি করা হয় না, তবে: একটি উপাদানের z-index শুধুমাত্র একই স্ট্যাকিং প্রসঙ্গে অন্যান্য উপাদানের তুলনায় তার ক্রম নির্ধারণ করে। একটি পৃষ্ঠার বেশিরভাগ উপাদান একটি একক, রুট স্ট্যাকিং প্রসঙ্গে, কিন্তু সম্পূর্ণ বা তুলনামূলকভাবে অবস্থান করা উপাদানগুলি অ-অটো z-index মানগুলির সাথে তাদের নিজস্ব স্ট্যাকিং প্রসঙ্গ গঠন করে (অর্থাৎ, তাদের সমস্ত সন্তানকে পিতামাতার মধ্যে z-অর্ডার করা হবে এবং অভিভাবকদের বাইরের বিষয়বস্তুর সাথে ইন্টারলেভ করা যাবে না)। Chrome 22 অনুযায়ী, position:fixed উপাদানগুলি তাদের নিজস্ব স্ট্যাকিং প্রসঙ্গও তৈরি করবে।
স্ট্যাকিং প্রসঙ্গগুলির একটি সাধারণ ওভারভিউয়ের জন্য এই MDN নিবন্ধটি একটি দুর্দান্ত পঠিত।
position:fixed নতুন অবস্থানে স্থির:স্টিকি বৈশিষ্ট্য : রেফারেন্সের জন্য, position:sticky সর্বদা একটি নতুন স্ট্যাকিং প্রসঙ্গ তৈরি করে।
প্রেরণা
মোবাইল ব্রাউজার (মোবাইল সাফারি, অ্যান্ড্রয়েড ব্রাউজার, Qt-ভিত্তিক ব্রাউজার) তাদের নিজস্ব স্ট্যাকিং প্রসঙ্গে অবস্থান: স্থির উপাদান রাখে এবং কিছু সময়ের জন্য (iOS5, অ্যান্ড্রয়েড জিঞ্জারব্রেড, ইত্যাদি) জন্য থাকে কারণ এটি নির্দিষ্ট স্ক্রোলিং অপ্টিমাইজেশনের অনুমতি দেয়, ওয়েব পৃষ্ঠাগুলিকে অনেক বেশি তৈরি করে। স্পর্শ করার জন্য আরও প্রতিক্রিয়াশীল। তিনটি কারণে ডেস্কটপে পরিবর্তন আনা হচ্ছে:
- "মোবাইল" এবং "ডেস্কটপ" ব্রাউজারে ভিন্ন রেন্ডারিং আচরণ করা ওয়েব লেখকদের জন্য একটি হোঁচট খায়; সিএসএস সম্ভব হলে সব জায়গায় একই কাজ করা উচিত।
- ট্যাবলেটগুলির সাথে এটি স্পষ্ট নয় যে "মোবাইল" বা "ডেস্কটপ" স্ট্যাকিং প্রসঙ্গ তৈরির অ্যালগরিদমগুলির মধ্যে কোনটি বেশি উপযুক্ত৷
- মোবাইল থেকে ডেস্কটপে স্ক্রলিং কর্মক্ষমতা অপ্টিমাইজেশন আনা ব্যবহারকারী এবং লেখক উভয়ের জন্যই ভালো।
পরিবর্তনের বিশেষত্ব
এখানে বিভিন্ন লেআউট আচরণ দেখানোর একটি উদাহরণ: https://codepen.io/paulirish/pen/CgAof
পরিবর্তনের সাথে, উভয় সংস্করণই ডান হাতের সংস্করণের মতো রেন্ডার হবে।
এই উদাহরণে, সবুজ বাক্সে একটি z-index: 1 , গোলাপী বাক্সে একটি z-index: 3 , এবং কমলা বাক্সে একটি z-index: 2 । নীল বাক্সটি কমলা বাক্সের পূর্বপুরুষ, এবং এর position:fixed ।
যদি নীল বাক্সটি তার নিজস্ব স্ট্যাকিং প্রসঙ্গ পায়, কমলা বাক্সের z-index নীল বাক্সের স্ট্যাকিং প্রসঙ্গের সাপেক্ষে গণনা করা হয়। যেহেতু নীল বক্সে auto একটি z-index রয়েছে, তাই এটিকে রুট স্ট্যাকিং প্রসঙ্গে শূন্যের স্ট্যাকিং স্তর দেয়, এর মানে হল কমলা বাক্সটি সবুজ এবং গোলাপী বাক্সের পিছনে শেষ হয়, যার z-সূচক 1 এবং 3 রয়েছে (যথাক্রমে ) মূল প্রসঙ্গে।
যদি নীল বাক্সটি তার নিজস্ব স্ট্যাকিং প্রসঙ্গ না পায়, তাহলে কমলা বাক্সের z-index রুট স্ট্যাকিং প্রসঙ্গ (সবুজ এবং গোলাপী বাক্সের সাথে) সাপেক্ষে গণনা করা হয়। তাই, কমলা বাক্সটি গোলাপী এবং সবুজ বাক্সের সাথে অন্তঃসত্ত্বা হয়ে যায়।
স্ট্যাকিং প্রসঙ্গ তৈরির মানদণ্ড সম্পর্কে আরও বিশদ বিবরণের জন্য (এবং সাধারণভাবে স্ট্যাকিং প্রসঙ্গগুলি কীভাবে আচরণ করে), আবার এই MDN নিবন্ধটি পড়ুন। উদাহরণে ডানদিকের সংস্করণটি সবসময় নীল বক্সটিকে তার নিজস্ব স্ট্যাকিং প্রসঙ্গ দেয় কারণ এর অস্বচ্ছতা 1-এর চেয়ে কম। আচরণের পরিবর্তন কার্যকরভাবে একটি পৃথক স্ট্যাকিং প্রসঙ্গ তৈরি করার জন্য আরেকটি মানদণ্ড যোগ করে, যেমন একটি উপাদান অবস্থান: স্থির।
পরীক্ষা এবং ভবিষ্যত
আপনার পৃষ্ঠা পরিবর্তন হতে চলেছে কিনা তা পরীক্ষা করতে, Chrome এর about:flags এ যান এবং "স্থির অবস্থান উপাদান স্ট্যাকিং প্রসঙ্গ তৈরি করুন" চালু/বন্ধ করুন। আপনার লেআউট উভয় ক্ষেত্রেই একই আচরণ করলে, আপনি সেট হয়ে গেছেন। যদি তা না হয়, নিশ্চিত করুন যে এটি সেই পতাকা সক্ষম করে আপনার কাছে গ্রহণযোগ্য বলে মনে হচ্ছে, কারণ এটি Chrome 22-এ ডিফল্ট হবে।
এই পরিবর্তনটি একটি ক্ষমতাকে সরিয়ে দেয় - একটি অবস্থানের মধ্যে বিষয়বস্তুকে ইন্টারলিভ করার ক্ষমতা: বাইরে থেকে নন-স্ক্রলিং সামগ্রী সহ নির্দিষ্ট সাবট্রি। এটা অসম্ভাব্য যে কোন ওয়েব ডেভেলপাররা উদ্দেশ্যমূলকভাবে এটি করছে এবং একই প্রভাব তৈরি করা যেতে পারে একাধিক অবস্থান: নির্দিষ্ট উপাদানগুলিকে DOM এর বিভিন্ন অংশ দিয়ে। একটি উদাহরণ হিসাবে, এই দুটি উদাহরণ বিবেচনা করুন:
https://codepen.io/wiltzius/pen/gcjCk
এই পৃষ্ঠাটি একটি অবস্থানের দুটি চাইল্ড ডিভ (ওভারলেএ এবং ওভারলেবি) নেওয়ার চেষ্টা করে: স্থির উপাদান এবং একটিকে একটি পৃথক বিষয়বস্তু ডিভের উপরে এবং একটি একই পৃথক বিষয়বস্তুর ডিভের নীচে। এটি করা এখন অসম্ভব কারণ position:fixed উপাদানটি তার নিজস্ব স্ট্যাকিং প্রসঙ্গ, এবং এটি (এর সমস্ত সন্তানের সাথে) হয় সম্পূর্ণভাবে উপরে বা সম্পূর্ণরূপে বিষয়বস্তুর নিচে থাকবে। মনে রাখবেন যে এই উদাহরণটি Chrome 21 এবং তার আগে কাজ করে কিন্তু Chrome 22-এ আর কাজ করে না।
এটি ঠিক করার জন্য, দুটি ওভারলে তাদের নিজস্ব অবস্থানে বিভক্ত করা যেতে পারে: স্থির উপাদান। প্রতিটি তার নিজস্ব স্ট্যাকিং প্রসঙ্গ, যার একটি বিষয়বস্তু ডিভের উপরে যেতে পারে এবং একটি সামগ্রী ডিভের নীচে যেতে পারে। স্থির উদাহরণ দেখুন, যা Chrome 21 এবং 22-এ কাজ করে:
https://codepen.io/wiltzius/pen/vhFzG
এই উদাহরণের উৎপত্তির কৃতিত্ব অনবদ্য হিক্সিকে যায়।
Chrome হল প্রথম ডেস্কটপ ব্রাউজার যা তাদের নিজস্ব স্ট্যাকিং প্রসঙ্গ তৈরি করতে পজিশন:ফিক্সড এলিমেন্ট তৈরি করে। প্রাসঙ্গিক মান হল CSS z-index স্পেসিফিকেশন (যেমন https://www.w3.org/TR/CSS21/zindex.html দেখুন)। এখানে মোবাইল এবং ডেস্কটপ ব্রাউজারগুলির মধ্যে পার্থক্য সম্পর্কে কী করতে হবে তা নিয়ে এখনও ঐকমত্য নেই, তবে মোবাইল এবং ডেস্কটপে দুটি ভিন্ন আচরণ থাকার বিভ্রান্তির কারণে, Chrome আপাতত উভয় প্ল্যাটফর্মে এই একক আচরণে যেতে বেছে নিয়েছে।
আপডেট করা হয়েছে অক্টোবর 1, 2012: এই নিবন্ধের মূল সংস্করণটি প্রস্তাব করেছে যে CSS z-index স্পেসিফিকেশন ইতিমধ্যেই পরিবর্তন করা হয়েছে অবস্থানের নতুন আচরণ প্রতিফলিত করার জন্য: স্থির উপাদান। এটা ভুল; এটি www-শৈলীর তালিকায় আলোচনা করা হয়েছে তবে এখনও পর্যন্ত বিশেষত্বে কোন পরিবর্তন করা হয়নি।