এই নিবন্ধটি পড়ার ফলে, আপনি CSS এর সাথে ওভারল্যাপিং ডিভ তৈরি করতে সক্ষম হবেন। এই উদ্দেশ্যে, প্রথমে আমরা শিখব ' অবস্থান ' এবং ' z-সূচক ' বৈশিষ্ট্য।
চল শুরু করি!
CSS 'অবস্থান' সম্পত্তি
HTML-এ, আপনি 'ব্যবহার করে উপাদানগুলির অবস্থান নির্ধারণ করতে পারেন অবস্থান 'সম্পত্তি। একটি ওয়েব পৃষ্ঠায় একটি উপাদানের চূড়ান্ত অবস্থান তার ডান, বাম, উপরে, নীচে এবং z-সূচী বৈশিষ্ট্যগুলির সাথে সমন্বয়ে নির্ধারিত হয়।
বাক্য গঠন
অবস্থান সম্পত্তির সিনট্যাক্স হল:
অবস্থান : মান
পরিবর্তে ' মান ”, আপনি উপাদানগুলির বিভিন্ন অবস্থান যেমন পরম, আপেক্ষিক, স্থির এবং স্টিকি সেট করতে পারেন।
CSS “z-index” প্রপার্টি
দ্য ' z-সূচক উপাদানগুলির স্ট্যাক অর্ডার সেট করতে সম্পত্তি ব্যবহার করা হয়। z-সূচকের বেশি মানের উপাদানটি অন্যটির সামনে স্থাপন করা হয়।
বাক্য গঠন
z-index সম্পত্তির সিনট্যাক্স নিম্নরূপ:
z-সূচক : স্বয়ংক্রিয় |সংখ্যাউপরে প্রদত্ত সিনট্যাক্সে, ' স্বয়ংক্রিয় প্যারেন্ট এলিমেন্ট অনুযায়ী অর্ডার সেট করতে ব্যবহৃত হয়, যখন ম্যানুয়াল সিকোয়েন্সের জন্য, ' সংখ্যা ” জেড-ইনডেক্স সম্পত্তির মান হিসাবে সেট করা হয়।
এখন, CSS এর সাথে ওভারল্যাপিং ডিভ তৈরির ব্যবহারিক উদাহরণে যাওয়া যাক।
উদাহরণ 1: প্রথমটির সাথে দ্বিতীয় ডিভকে ওভারল্যাপ করা
এইচটিএমএল সেকশনে, আমরা দুটি ডিভ তৈরি করব এবং বিভিন্ন শ্রেণীর নাম বরাদ্দ করব “ div1 ' এবং ' div2 ”
এইচটিএমএল
< শরীর >< div ক্লাস = 'div1' < / div >
< div ক্লাস = 'div2' < / div >
< / শরীর >
এখন, CSS এ যান এবং প্রদত্ত নির্দেশাবলী অনুসরণ করুন:
- অবস্থান সম্পত্তির মান হিসাবে সেট করুন “ পরম ” জায়গা div1 এর জন্য ঠিক সেই জায়গা যেখানে আপনি চান।
- div1 এর উচ্চতা এবং প্রস্থ সামঞ্জস্য করুন ' 250px ' এবং ' 300px ”
- z-সূচকের মান ' হিসাবে সেট করা হয়েছে 1 ”
- div1 এর ব্যাকগ্রাউন্ড কালার হিসেবে সেট করুন “ rgb(4, 3, 75) ”
সিএসএস
.div1 {অবস্থান : পরম ;
উচ্চতা : 250px ;
প্রস্থ : 300px ;
z-সূচক : 1 ;
পটভূমি : rgb ( 4 , 3 , 75 ) ;
}
আউটপুট
প্রথম div সফলভাবে স্থাপন করা হয়েছে. এখন, আমরা দ্বিতীয় ভাগে চলে যাই।
div2 ওভারল্যাপ করতে, প্রদত্ত নির্দেশাবলী অনুসরণ করুন:
- div2 এর অবস্থান সম্পত্তি, প্রস্থ এবং উচ্চতার মান সেট করুন ' div1 ”
- z-সূচকের মান ' হিসাবে সেট করুন দুই ” এটিকে প্রথম ডিভের সামনে রাখতে।
- div2 এর জন্য একটি ভিন্ন ব্যাকগ্রাউন্ড কালার সেট করুন “ rgb(0, 204, 255) ”
- div2 এর মার্জিন সেট করুন “ 50px ” মার্জিন-শীর্ষ এবং মার্জিন-বাম মান হিসাবে।
- div2 এর অপাসিটি সেট করুন “ 0.7 ”
সিএসএস
.div2 {অবস্থান : পরম ;
প্রস্থ : 300px ;
উচ্চতা : 250px ;
z-সূচক : 3 ;
পটভূমি : rgb ( 0 , 204 , 255 ) ;
মার্জিন : 50px ;
অস্বচ্ছতা : 0.7 ;
}
আউটপুট
Div2 সফলভাবে div1 এর সাথে ওভারল্যাপ করে।
আপনি যদি div2 এর উপরে div1 সেট করতে চান, তাহলে আপনাকে শুধু z-index এর মান পরিবর্তন করতে হবে। এর একটি উদাহরণ দেখা যাক।
উদাহরণ 2: দ্বিতীয় ভাগের সাথে প্রথম ভাগকে ওভারল্যাপ করা
এই উদাহরণে, আমরা উভয় ডিভের z-সূচকের মান পরিবর্তন করব। মধ্যে ' .div1 CSS ফাইলের ক্লাস, এর মান সেট করুন z-সূচক ' সম্পত্তি হিসাবে ' দুই ”:
z-সূচক : দুই ;এর পরে, 'এ .div2 'শ্রেণী, 'এর মান সেট করুন z-সূচক ' সম্পত্তি হিসাবে ' 1 ”:
z-সূচক : 1 ;ফলস্বরূপ, প্রথম ডিভটি দ্বিতীয় ডিভের সামনে স্থাপন করা হবে:
আমরা সিএসএস দিয়ে দুটি ওভারল্যাপিং ডিভ তৈরি করার সবচেয়ে সহজ পদ্ধতিটি কম্পাইল করেছি।
উপসংহার
দ্য ' অবস্থান ' এবং ' z-সূচক ” সম্পত্তি CSS-এ ওভারল্যাপিং ডিভ তৈরি করতে ব্যবহৃত হয়। ডিফল্টরূপে, z-সূচকের মান হল 1, যা বলে যে নতুন তৈরি ডিভটি বিদ্যমান ডিভের সামনে স্থাপন করা হবে। যাইহোক, ওভারল্যাপিং সিকোয়েন্স সামঞ্জস্য করতে আপনি আপনার প্রয়োজনীয়তা অনুযায়ী যেকোনো মান নির্দিষ্ট করতে পারেন। এই নিবন্ধে, আমরা CSS এর সাথে ওভারল্যাপিং ডিভ তৈরি করার পদ্ধতিগুলি অফার করেছি।