নিখুঁত বনাম সম্পর্কযুক্ত - সিএসএস পজিশনিং ব্যাখ্যা

সিএসএস পজিশনিংটি শুধু এক্স এক্স, ইউ কোঅর্ডিনেটস এর চেয়ে বেশি

CSS পজিশনিং দীর্ঘ ওয়েবসাইটের লেআউট তৈরির একটি গুরুত্বপূর্ণ অংশ। এমনকি ফ্লেক্সবক্স এবং CSS গ্রিডের মতো নতুন CSS লেআউট কৌশলগুলির উদ্ভবের সাথে, কোনও ওয়েব ডিজাইনারের ব্যাটগুলির ব্যাগে একটি স্থায়ী অবস্থান এখনও রয়েছে।

সিএসএস পজিশনিং ব্যবহার করার সময়, আপনি যা করতে চান তা হল প্রথম উপাদানটি সিএসএস প্রজেক্টটি ব্রাউজারকে বলার জন্য পজিশনটি স্থাপন করে যদি আপনি একটি নির্দিষ্ট উপাদানটির জন্য পরম বা আপেক্ষিক পজিশনিং ব্যবহার করতে যাচ্ছেন আপনি এই দুটি পজিশনিং বৈশিষ্ট্য মধ্যে পার্থক্য পরিষ্কারভাবে বুঝতে প্রয়োজন।

যদিও সম্পূর্ণ এবং আপেক্ষিকতা দুটি সিএসএস অবস্থান বৈশিষ্ট্য প্রায়ই ওয়েব ডিজাইন ব্যবহার করা হয়, অবস্থান সম্পত্তি আসলে চারটি রাষ্ট্র আছে:

• স্থির
• পরম
• আপেক্ষিক
• স্থায়ী

স্ট্যাটিক একটি ওয়েব পৃষ্ঠার কোন উপাদান জন্য ডিফল্ট অবস্থান। যদি আপনি একটি উপাদান অবস্থান নির্ধারণ না, এটি স্ট্যাটিক হবে। এর মানে হল যে এটি এইচটিএমএল ডকুমেন্টের উপর ভিত্তি করে পর্দার উপর প্রদর্শিত হবে এবং এটি কিভাবে এই দস্তাবেজের সাধারণ প্রবাহের ভিতরে প্রদর্শন করবে।

যদি আপনি পজিশনিং নিয়মগুলি উপরে বা বামে এমন একটি উপাদানতে প্রয়োগ করেন যা একটি স্ট্যাটিক পজিশন থাকে, তবে ঐ নিয়মগুলি উপেক্ষা করা হবে এবং উপাদানটি সেই স্থানে থাকবে যেখানে স্বাভাবিক ডকুমেন্ট প্রবাহে এটি প্রদর্শিত হবে। সত্য, আপনি খুব কমই, যদি কখনোই, CSS এ স্থিতিশীল অবস্থানে একটি উপাদান সেট করার প্রয়োজন হয় যা ডিফল্ট মান।

পরম সিএসএস পজিশনিং

পরম অবস্থান সম্ভবত বুঝতে সহজ সিএসএস অবস্থান। আপনি এই সিএসএস অবস্থান অবস্থার সঙ্গে শুরু:

অবস্থান: পরম;

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

যেহেতু একটি নিখুঁত অবস্থান উপাদান নথির স্বাভাবিক প্রবাহ থেকে নেওয়া হয়, এটি HTML এর মধ্যে আগে বা পরে এটি উপাদান ওয়েব পৃষ্ঠায় অবস্থিত হয় কিভাবে প্রভাবিত করবে না।

একটি উদাহরণ হিসাবে - যদি আপনার একটি বিভাগ ছিল যা আপেক্ষিকতার মান ব্যবহার করে অবস্থান করে (আমরা শীঘ্রই এই মূল্যটি দেখব), এবং এই বিভাগের মধ্যে আপনার অনুচ্ছেদটি ছিল যে আপনি বিভাগের উপরে থেকে 50 পিক্সেল অবস্থান করতে চেয়েছিলেন, আপনি যে "শীর্ষ" সম্পত্তি 50px একটি অফসেট মানের সঙ্গে এই অনুচ্ছেদের জন্য "পরম" একটি অবস্থান মান যোগ করবে, এই মত।

অবস্থান: পরম; শীর্ষ: 50 পিএক্স;

এই সম্পূর্ণরূপে অবস্থানের উপাদানটি সর্বদা তুলনামূলকভাবে গঠিত বিভাগের উপরে থেকে 50 পিক্সেল প্রদর্শন করবে - স্বাভাবিক প্রবাহে আর কোনটিই সেখানে প্রদর্শিত হবে না। আপনার "একেবারে" স্থিরীকৃত উপাদান তার প্রেক্ষাপটে অপেক্ষাকৃত অবস্থানটি ব্যবহার করে এবং আপনি যে positing মান ব্যবহার করেন সেটি আপেক্ষিক।

চারটি পজিশনিং বৈশিষ্ট্য যা আপনি ব্যবহারের জন্য উপলব্ধ আছে:

• শীর্ষ
• অধিকার
• পাদ
• বাম

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

যদি একটি উপাদান সম্পূর্ণ একটি অবস্থান সেট করা হয়, কিন্তু সেখানে এটি কোন অ স্ট্যাটিক্যাল অবস্থান পূর্বপুরুষ আছে, তারপর এটি শরীরের উপাদান, যা পৃষ্ঠার সর্বোচ্চ স্তরের উপাদান হয় প্রতিস্থাপিত করা হবে।

আপেক্ষিক অবস্থান

আমরা ইতিমধ্যে আপেক্ষিক পজিশনিং উল্লেখ করেছি, তাই আসুন এখন যে সম্পত্তি তাকান।

আপেক্ষিক পজিশনিং একই চারটি পজিশনিং বৈশিষ্ট্যগুলি পরম পজিশন হিসাবে ব্যবহার করে, তবে তার নিকটতম অ স্ট্যাটিক্যাল পজিশন পূর্বের উপর উপাদানটির অবস্থানকে ভিত্তি করার পরিবর্তে, এটি এমন উপাদান থেকে শুরু করে যেখানে এটি স্বাভাবিক প্রবাহের মধ্যে এখনও থাকবে।

উদাহরণস্বরূপ, আপনার ওয়েব পৃষ্ঠায় আপনার তিনটি অনুচ্ছেদের যদি থাকে, এবং তৃতীয়টিতে "অবস্থান: আপেক্ষিক" শৈলী রয়েছে, তবে এটির বর্তমান অবস্থানের ভিত্তিতে অবস্থানটি অফসেট হবে।

অনুচ্ছেদ 1।

অনুচ্ছেদ ২।

অনুচ্ছেদ 3।

উপরোক্ত উদাহরণে, তৃতীয় অনুচ্ছেদের ধারক উপাদান বাম পাশ থেকে 2em স্থাপন করা হবে, কিন্তু এখনও প্রথম দুই অনুচ্ছেদের নীচের হতে হবে। এটি ডকুমেন্টের স্বাভাবিক প্রবাহে থাকবে, এবং সামান্য পরিমাণে অফসেট করা হবে। আপনি এটি অবস্থান থেকে পরিবর্তন করা হলে: পরম; এটা অনুসরণ কিছু এটি উপরে প্রদর্শিত হবে, কারণ এটি নথি স্বাভাবিক প্রবাহ মধ্যে আর হবে না।

একটি ওয়েব পৃষ্ঠার উপাদানগুলি প্রায়ই অবস্থানের মান নির্ধারণের জন্য ব্যবহৃত হয়: কোনও অফসেট মান প্রতিষ্ঠিত না থাকাতে আপেক্ষিকতা, যার অর্থ হল উপাদানটি স্বাভাবিক প্রবাহে প্রদর্শিত হবে। এটি সম্পূর্ণরূপে সম্পন্ন করা হয় যে একটি উপাদান হিসাবে একটি উপাদান হিসাবে যে অন্য উপাদানগুলি একে অপরকে স্থাপন করা যাবে। উদাহরণস্বরূপ, যদি আপনি আপনার পুরো ওয়েবসাইটকে "কনটেইনার" (যা ওয়েব ডিজাইনের একটি খুব সাধারণ দৃশ্য) একটি ক্লাস মান সহ পার্শ্ববর্তী একটি বিভাগ আছে, যে বিভাগ আপেক্ষিক একটি অবস্থান সেট করা যেতে পারে যাতে এটি ভিতরে কিছু ব্যবহার করতে পারেন এটি একটি পজিশনিং প্রসঙ্গ হিসাবে

স্থির অবস্থান সম্পর্কে কি?

ফিক্সড পজিশনিংটি সম্পূর্ণ পজিশনিংয়ের মত অনেক। উপাদান অবস্থান পরম মডেল হিসাবে একই ভাবে গণনা করা হয়, কিন্তু নির্দিষ্ট উপাদান তারপর যে অবস্থানে সংশোধন করা হয়- প্রায় একটি ওয়াটারমার্ক মত। পৃষ্ঠায় অন্য সবকিছু তারপর যে উপাদান অতীতের স্ক্রোল করবে

এই সম্পত্তি মান ব্যবহার করতে, আপনি সেট করবে:

অবস্থান: স্থির;

মনে রাখবেন, যখন আপনি আপনার সাইটে কোনও উপাদান ঠিক করেন, তখন আপনার ওয়েব পৃষ্ঠাটি ছাপানো হলে তা সেই স্থানে মুদ্রণ করবে। উদাহরণস্বরূপ, যদি আপনার পৃষ্ঠার উপরে আপনার উপাদানটি নির্দিষ্ট করা হয়, তবে এটি প্রতিটি মুদ্রিত পৃষ্ঠার উপরে প্রদর্শিত হবে - কারণ এটি পৃষ্ঠার শীর্ষে সংশোধন করা হয়েছে মুদ্রিত পৃষ্ঠাগুলিকে নির্দিষ্ট উপাদানের প্রদর্শন কিভাবে পরিবর্তন করতে আপনি মিডিয়া প্রকারগুলি ব্যবহার করতে পারেন:

@ মিডিয়া স্ক্রিন {h1 # প্রথম {অবস্থান: স্থির; }} @ মিডিয়া মুদ্রণ {h1 # প্রথম {অবস্থান: স্ট্যাটিক; }}

জনিফার ক্রাইনিনের মূল রচনা 1/7/16 তারিখে জেরেমি গিয়ার্ড দ্বারা সম্পাদিত