ওয়েব পৃষ্ঠাগুলি ডিজাইন করার সময় সবচেয়ে গুরুত্বপূর্ণ বিষয় হল উপাদানগুলির সঠিক অবস্থান। Tailwind 'অবস্থান' ক্লাস ব্যবহার করে এটি সহজেই করা যেতে পারে। অবস্থান বিভিন্ন ধরনের হতে পারে তাদের মধ্যে একটি স্থির।

এই ব্লগটি প্রদর্শন করবে কিভাবে উপাদানটিকে স্থিতিশীলভাবে অবস্থান করতে হয়।

কিভাবে স্থিতিশীলভাবে DOM - Tailwind-এ একটি উপাদানের অবস্থান করবেন?

একটি উপাদান স্থিরভাবে অবস্থান করা যেতে পারে ' ব্যবহার করে স্থির ' অবস্থানের শ্রেণী। স্ট্যাটিক পজিশন হল HTML এলিমেন্টের ডিফল্ট পজিশন। উপাদানগুলির সাথে ' অবস্থান: স্থির ” কোনো CSS স্টাইলিং ছাড়াই পৃষ্ঠার স্বাভাবিক প্রবাহের উপর ভিত্তি করে অবস্থান করা হয়।

বাক্য গঠন
প্রয়োগের জন্য সিনট্যাক্স ' স্থির 'শ্রেণী হল:

এখানে, উপাদানটি যেকোনো ট্যাগ হতে পারে যেখানে একটি অবস্থান বৈশিষ্ট্য প্রয়োগ করা যেতে পারে।

স্ট্যাটিক পজিশনিং এর ব্যবহারিক বাস্তবায়নের জন্য কোডটি দেখুন:

এই কোডে:

• ' পাঠ্য কেন্দ্র ” পর্দার কেন্দ্রে ট্যাগ বিষয়বস্তু সামঞ্জস্য করে।
• স্থির কর '

  'সবুজ ট্যাগ' ব্যবহার করে টেক্সট-সবুজ-600 ', পাঠ্যের আকার ' দ্বারা পাঁচ গুণ সেট করা হয়েছে পাঠ্য-5×1 'এবং ফন্টটি ' ব্যবহার করে জোর দেওয়া হয় ফন্ট-বোল্ড ”

• দুই
  ' উপাদানগুলিও তৈরি করা হয় এবং প্রথমটির জন্য স্ট্যাটিক বাম-পাশের অবস্থান সেট করে ' div ' ব্যবহার করে ' স্ট্যাটিক টেক্সট-বাম ”
• 'এর ক্লাস বরাদ্দ করুন p-2 ', ' m-2 ', ' বিজি-সবুজ-200 ', ' h-48 'দ্বিতীয় ডিভের জন্য এবং ' ব্যবহার করে নিখুঁত নীচে-বামে তার অবস্থান সেট করুন আপেক্ষিক নীচে-০ বাম-০ 'শ্রেণী।

আউটপুট
ফাইলটিতে উপরের কোডটি সংরক্ষণ করুন এবং এটি দ্বারা তৈরি ওয়েবপৃষ্ঠাটির পূর্বরূপ দেখুন যা এই হিসাবে দেখাবে:

স্ট্যাটিকভাবে অবস্থান করা উপাদানটি স্বাভাবিক পৃষ্ঠা প্রবাহের সাথে চলে যখন অন্য উপাদানটি তার পরম অবস্থান ধরে রাখে।

উপসংহার

ডকুমেন্টের স্বাভাবিক প্রবাহের সাথে DOM-এ একটি উপাদানকে স্থিরভাবে অবস্থান করতে, ' স্থির 'টেইলউইন্ডের ক্লাস' অবস্থান 'উপযোগিতা। এই ব্লগে দেখানো হয়েছে যে কোন উপাদান কিভাবে অবস্থান করতে হয় ' স্থিতিশীলভাবে একটি সহজ ব্যবহারিক প্রদর্শনের সাথে।