এই ব্লগটি CSS অবস্থানের বৈশিষ্ট্য এবং HTML এ একটি স্টিকি উপাদান তৈরি করার পদ্ধতি নিয়ে আলোচনা করবে।
CSS অবস্থান সম্পত্তি কি?
CSS পজিশন প্রপার্টি HTML এলিমেন্টের পজিশনিং মেথড নির্দিষ্ট করে, যেটা হতে পারে পরম, স্টিকি, স্ট্যাটিস্টিক, ফিক্সড, ইনহেরিট, আপেক্ষিক বা প্রাথমিক।
বাক্য গঠন
অবস্থান : আঠালো | পরম | স্থির | স্থির | আপেক্ষিক | আপনি উত্তরাধিকারী | প্রাথমিক
উপরে দেওয়া সিনট্যাক্স দেখায় যে অবস্থান সম্পত্তির বিভিন্ন মান রয়েছে। সে অনুযায়ী তাদের নিয়োগ দেওয়া যেতে পারে।
এখন, এইচটিএমএলে স্টিকি উপাদান তৈরি করার পদ্ধতিটি পরীক্ষা করে দেখুন।
CSS অবস্থান কি: স্টিকি?
একটি HTML উপাদান আঠালো ' অবস্থানের একটি আপেক্ষিক অবস্থান থাকে যতক্ষণ না এটি একটি বিন্দুতে পৌঁছায় এবং তারপরে একটি স্টিকি উপাদানের মতো কাজ করে।
CSS স্টিকি পজিশনের ধারণাটি বোঝার জন্য আসুন সহজ উদাহরণ দিয়ে যাই।
উদাহরণ: কিভাবে HTML এ একটি স্টিকি এলিমেন্ট তৈরি করবেন?
HTML ফাইলে, শিরোনামের জন্য
যোগ করুন, অনুচ্ছেদের জন্য
এবং
ট্যাগ যুক্ত করুন যেখানে নেস্টেড অর্ডার করা তালিকা
- একটি তালিকা
- সহ।
বিঃদ্রঃ : আমরা একটি দীর্ঘ তালিকা নিয়েছি যাতে আমাদের পৃষ্ঠা স্ক্রোল করার পরে, আপনি স্টিকি উপাদানটির আচরণ পর্যবেক্ষণ করতে পারেন।
এইচটিএমএল
< h2 > স্টিকি নোট: স্টিকি এলিমেন্টের প্রভাব দেখুন < / h2 >
< পি > অবস্থান: স্টিকি < / পি >
< div ক্লাস = 'আঠালো' > এটি আমার করণীয় তালিকা! < / div >
< পি >
< ol >
< যে > ম্যানেজারকে কল করুন < / যে >
< যে > কর্মচারীদের সাথে মিটিং < / যে >
< যে > প্রতিবেদন জমা কর < / যে >
< যে > ডাক্তারের কাছে যাও < / যে >
< যে > একটি ফ্লাইট বুক < / যে >
< যে > হাঁটতে যান। < / যে >
< যে > মুদির জন্য যান. < / যে >
< যে > টিভি দেখ < / যে >
< যে > কিছু লেখা। < / যে >
< যে > কিছু লেখা। < / যে >
< যে > কিছু লেখা। < / যে >
< যে > কিছু লেখা। < / যে >
< যে > কিছু লেখা। < / যে >
< যে > কিছু লেখা। < / যে >
< যে > কিছু লেখা। < / যে >
< যে > কিছু লেখা। < / যে >
< যে > কিছু লেখা। < / যে >
< যে > কিছু লেখা। < / যে >
< যে > কিছু লেখা। < / যে >
< যে > কিছু লেখা। < / যে >
< যে > কিছু লেখা। < / যে >
< যে > কিছু লেখা। < / যে >
< যে > কিছু লেখা। < / যে >
< যে > কিছু লেখা। < / যে >
< যে > কিছু লেখা। < / যে >
< যে > কিছু লেখা। < / যে >
< যে > কিছু লেখা। < / যে >
< যে > কিছু লেখা। < / যে >
< যে > কিছু লেখা। < / যে >
< যে > কিছু লেখা। < / যে >
< / ol >
< / পি >এর পরে, আমরা স্টিকি নামের ডিভিতে শৈলী প্রদান করব:
- এখানে, ' .আঠালো ” সেই শ্রেণীর প্রতিনিধিত্ব করে যেখানে শৈলী বৈশিষ্ট্য প্রয়োগ করা প্রয়োজন।
- কোঁকড়া বন্ধনীর ভিতরে, আমরা ' অবস্থান ' সম্পত্তির মান হিসাবে ' আঠালো ”
- দ্য ' শীর্ষ ' হিসাবে সেট করা হয় ' 0 ”
- দ্য ' পেছনের রং 'হয়' #00154f ”
- কিছু দাও ' প্যাডিং ' div এ এর মান সেট করে ' 40px ”
- ' অক্ষরের আকার 'যেমন' 30px ”
- ' রঙ হরফগুলির '' হিসাবে সেট করা হয়েছে সাদা ”
সিএসএস
.আঠালো {
অবস্থান : আঠালো ;
শীর্ষ : 0 ;
পেছনের রং : #00154f ;
প্যাডিং : 40px ;
অক্ষরের আকার : 30px ;
রঙ : সাদা ;
}HTML ফাইলটি সংরক্ষণ করুন এবং আউটপুট দেখতে ব্রাউজারে খুলুন:
বোনাস টিপ
ব্যবহার করে ' hsla() ” পদ্ধতিতে, আপনি নিম্নলিখিত হিসাবে যোগ করা স্টিকি উপাদানের জন্য একটি স্বচ্ছ পটভূমি সেট করতে পারেন:
পটভূমি - রঙ : hsla ( 0 , 100 %, 90 %, 0.8 ) ;আউটপুট
এইভাবে উপাদানটি সিএসএস সেট করে নির্দিষ্ট অবস্থানে আটকে থাকে “ অবস্থান ' সম্পত্তির মান হিসাবে ' আঠালো ”
উপসংহার
দ্য ' আঠালো ” CSS-এ অবস্থান, উপাদানের অবস্থান আপেক্ষিক এবং স্থির মধ্যে টগল করে। ফলস্বরূপ, যোগ করা স্টিকি উপাদানটি স্ক্রোলের সাথে সম্পর্কিত হয় যতক্ষণ না এটি একটি নির্দিষ্ট বিন্দুতে পৌঁছায় যখন এটি একটি স্টিকির মতো আচরণ করে। আপনি hsla() পদ্ধতি ব্যবহার করে যোগ করা স্টিকি উপাদানের স্বচ্ছতা স্তর সামঞ্জস্য করতে পারেন। এই ব্লগটি আপনাকে সহজ এবং স্টিকি স্বচ্ছ উপাদান তৈরি করার বিষয়ে নির্দেশনা দিয়েছে।