সিএসএসে স্থির (ডিফল্ট) অবস্থান এবং আপেক্ষিক অবস্থানের মধ্যে পার্থক্য কী?
স্থির এবং আপেক্ষিক অবস্থানের মধ্যে পার্থক্য
উত্তর:
স্থির অবস্থান উপাদানগুলির জন্য ডিফল্ট অবস্থানের মডেল position তারা সেই পৃষ্ঠায় প্রদর্শিত হয় যেখানে তারা সাধারণ এইচটিএমএল প্রবাহের অংশ হিসাবে রেন্ডার করে। স্ট্যাটিক্যালি স্থান উপাদান আনুগত্য করবেন না left, top, rightএবং bottomনিয়ম:
আপেক্ষিক পজিশনিং আপনি যদি একটি নির্দিষ্ট অফসেট (নির্দিষ্ট করার অনুমতি দেবে left, topইত্যাদি) যা উপাদান এর এইচটিএমএল প্রবাহ স্বাভাবিক অবস্থানে আপেক্ষিক। সুতরাং যদি আমার কোনও পাঠ্যবক্স থাকে তবে আমি সাধারণত পাঠ্যবাক্সটিতে divএটি নির্দিষ্ট জায়গায় প্রদর্শন করতে পারি যেখানে এটি সাধারণত এর মধ্যে স্থাপন করা হয় div:
এছাড়াও নিখুঁত অবস্থান রয়েছে - যার মাধ্যমে আপনি পুরো ডকুমেন্টের সাথে সম্পর্কিত উপাদানটির সঠিক অবস্থান বা পরবর্তী তুলনামূলকভাবে অবস্থানের উপাদানটিকে উপাদান গাছের উপরে নির্দিষ্ট করে দিন :
এবং যখন position: relativeহায়ারার্কিতে কোনও পিতামাতার উপাদান প্রয়োগ করা হয়:
আমাদের একেবারে অবস্থানের উপাদানটি কীভাবে তুলনামূলকভাবে অবস্থানযুক্ত উপাদান দ্বারা আবদ্ধ তা নোট করুন।
এবং সর্বশেষে স্থির আছে। স্থির অবস্থান ভিউপোর্টের একটি নির্দিষ্ট অবস্থানে একটি উপাদানকে সীমাবদ্ধ করে, যা স্ক্রোল চলাকালীন স্থানে থাকে:
আপনি এমন আচরণও পর্যবেক্ষণ করতে পারেন যা স্থির-অবস্থানযুক্ত উপাদানগুলি স্ক্রোলের কারণ হয় না কারণ এগুলি ভিউপোর্টের দ্বারা আবদ্ধ বলে মনে করা হয় না:
যদিও একেবারে অবস্থানযুক্ত উপাদানগুলি এখনও ভিউপোর্টের সাথে আবদ্ধ এবং স্ক্রোলিংয়ের কারণ ঘটবে:
.. অবশ্যই আপনার পিতামাতার উপাদান overflow: ?স্ক্রোলের আচরণ নির্ধারণ করতে ব্যবহার করে (যদি থাকে)।
পরম অবস্থান এবং স্থির অবস্থানের সাথে উপাদানগুলিকে এইচটিএমএল প্রবাহের বাইরে নিয়ে যাওয়া হয়।
ভাল উত্তর, কিন্তু (আপেক্ষিক অবস্থানের জন্য) উপাদানটির স্বাভাবিক অবস্থানের ভিত্তিতে অফসেট নয়?
—
বাজতউনে
আমি বাজতুনের সাথে একমত, তুলনামূলকভাবে অবস্থানযুক্ত উপাদানগুলির জন্য এই সংজ্ঞাটি বিভ্রান্তিকর। এ
—
রায়ান উইলিয়ামস
staticএবং relativeউপাদানটি সমান, পরেরটি বাদ দিয়ে আপনি এটিকে তার মূল অবস্থানের সাথে তুলনামূলকভাবে স্থাপন করতে পারবেন , এটি ধারণকারী উপাদানটির সাথে নয় - এটিই absoluteআসে Also এছাড়াও, staticআপনি ব্যবহার করতে পারেন এমন কোনও মান ব্যবহার করে অবস্থান নির্ধারিত কোনও উপাদানটির মতো z-index।
বিভিন্ন অবস্থানের প্রকারটি প্রদর্শন করতে আমি সম্পর্কিত উত্তরকে আরও সঠিকভাবে সংজ্ঞায়িত করতে ইমেজগুলি অন্তর্ভুক্ত করেছি।
—
ম্যাথু অ্যাবট
আমি ভাবছি কেন সিএসএস এখনও ডিফল্টরূপে
—
cram2208
position: static;পরিবর্তে পরিবর্তে এটি প্রয়োগ করবে position: relative;? যদি কেউ আইটেম ব্যতীত অন্য কোনও স্থানে অবস্থান করতে না চায় top: 0;এবং left: 0;তাহলে আসুন এটি করা উচিত না, তাই না? position: static;সিএসএসের অংশ হিসাবে কেন এখনও অন্তর্নিহিত কারণ প্রয়োজন?
@ ক্র্যাম ২২০৮ কারণ আপেক্ষিকভাবে বাচ্চাদের নিখুঁত অবস্থানযুক্ত নোডগুলি তাদের তুলনায় যথাযথভাবে স্থিত করে তোলে, স্থিতিশীল একেবারে অবস্থানযুক্ত বাচ্চাদের তাদের অবস্থানকে উপেক্ষা করতে এবং নিকটতম সম্পর্কিত আপেক্ষিক অবস্থানের তুলনায় অবস্থান করতে দেয় be এটির একটি গুরুত্বপূর্ণ ধারণা
—
Felype
আপনি এখানে একটি সাধারণ ওভারভিউ দেখতে পারেন: ডাব্লু 3 স্কুল
এছাড়াও, যদি আমি সঠিকভাবে স্মরণ করি, যখন কোনও উপাদানকে আপেক্ষিক হিসাবে ঘোষণা করার সময় এটি ডিফল্টরূপে অন্যথায় যেমন হয় ঠিক তেমনভাবেই থাকবে তবে আপনি এটির উপাদানগুলির তুলনায় এই উপাদানটির তুলনামূলকভাবে তুলনামূলকভাবে দক্ষতা অর্জন করতে পারেন যা আমি খুব দরকারী বলে মনে করেছি which অতীতে.
w3schools ... আমি এটিকে কম করব না তবে আপনাকে অবশ্যই লজ্জার সাথে বাঁচতে হবে।
—
মাইলস গ্রে
এদিকে, ২০১৩ সালের মধ্যে, ডাব্লু 3 স্কুলগুলি আগের মতো খারাপ ছিল না (এটি এখনও নিখুঁত নয়, তবে তারা সম্প্রদায়ের প্রতিক্রিয়াটিকে গুরুত্বের সাথে নিয়েছে এবং বাস্তবে উন্নত হয়েছে)।
—
প্রিয়দু নিমরে
ইতিমধ্যে, 2018 এর শেষদিকে, ডাব্লু 3 স্কুলগুলি এখনও আগের মতো খারাপ ছিল না, তবে তাদের পক্ষে খারাপ লাগছে যে তাদের খ্যাতি এখনও এমনই যে অন্য দেবগণের উপরোক্ত প্রথম মন্তব্যের উল্লেখ করার পরেও ক্লাসিক ছোটাছুটি হয় ... ফিরে আমার দিনে ...
—
ডাব্লু 3 স্কুল
"কেন সিএসএস এখনও অবস্থান বাস্তবায়িত করবে: এর উত্তরে; স্থির;" এক দৃশ্যে, অবস্থান ব্যবহার করে: পিতা বা মাতার জন্য আপেক্ষিক এবং অবস্থান: সন্তানের পক্ষে পরম সন্তানের স্কেলিং প্রস্থকে সীমাবদ্ধ করে। একটি অনুভূমিক মেনু সিস্টেমে যেখানে আপনার লিঙ্কগুলির 'কলাম' থাকতে পারে, সেখানে 'প্রস্থ: অটো' ব্যবহার করে আপেক্ষিক পিতামাতার সাথে কাজ করে না। এই ক্ষেত্রে, এটি 'স্ট্যাটিক' এ পরিবর্তন করা প্রস্থের মধ্যে থাকা সামগ্রীর উপর নির্ভরশীল পরিবর্তনশীল নির্ভর করে।
আমি কেন আমার কনটেইনার এর মধ্যে থাকা সামগ্রীর পরিমাণের ভিত্তিতে সামঞ্জস্য করতে পারি না তা ভেবে বেশ কয়েক ঘন্টা ব্যয় করেছি। আশাকরি এটা সাহায্য করবে!
এই উত্তর! প্রত্যেকে কেবল আপেক্ষিক পজিশনিংয়ের জন্য পেশাদারকে বলে, একটি প্রশ্নের মতো বিন্দুটি অনুপস্থিত: পার্থক্য কী।
—
বার্টিস অ্যারন
অবস্থান আপেক্ষিক আপনাকে পজিশনের জন্য উপরে / নীচে / বাম / ডান ব্যবহার করতে দেয়। আপনি মার্জিন প্যারামিটার ব্যবহার না করে স্ট্যাটিক আপনাকে এটি করতে দেয় না। শীর্ষ এবং মার্জিন-শীর্ষের মধ্যে পার্থক্য রয়েছে।
এটি আপনার ডিফল্ট হিসাবে স্ট্যাটিক ব্যবহার করার দরকার নেই
আপেক্ষিক অবস্থান স্বাভাবিক প্রবাহের সাথে তুলনামূলক। সেই উপাদানটির আপেক্ষিক অবস্থান (অফসেট সহ) সেই অবস্থানের সাথে সম্পর্কিত যেখানে সেই উপাদানটি সরানো না থাকলে সাধারণত থাকত ly
ম্যাথু অ্যাবট একটি সত্যিই ভাল উত্তর আছে।
পরম এবং আপেক্ষিক স্থান আইটেম আনুগত্য কর top, left, rightএবং bottomকমান্ড (অফসেট) যেখানে স্ট্যাটিক স্থান আইটেম না।
তুলনামূলকভাবে অবস্থানযুক্ত আইটেমগুলি অফসেটগুলি সরিয়ে নিয়ে যায় সেখান থেকে তারা সাধারণত এইচটিএমটিএলে থাকে।
নিখুঁত অবস্থানযুক্ত আইটেমগুলি দস্তাবেজ থেকে অফসেটগুলি সরিয়ে দেয় বা পরের তুলনামূলকভাবে অবস্থানিক উপাদানটি ডিওএম গাছের উপরে রাখে।
স্থিতিশীল এবং আপেক্ষিক হ'ল অবস্থান বৈশিষ্ট্য re সম্পর্কিত অনেকগুলি ব্যবহারের জন্য ব্যবহৃত হয়। একটির জন্য নয়। তবে মনে রাখবেন যে স্থির এবং আপেক্ষিক এইচটিএমএলের স্বাভাবিক নথির প্রবাহকে ক্ষতি না করে। স্ট্যাটিক হ'ল ডিফল্ট অবস্থান যা আপনি যখন এইচটিএমএলে কোনও উপাদান লেখেন। যদি কোনও উপাদানটির একটি আপেক্ষিক অবস্থান থাকে তবে element উপাদানটির মূল অবস্থানের সাথে তুলনামূলকভাবে অবস্থান করা যেতে পারে। যখন আপনি ছোট স্থান থেকে উপাদান সামঞ্জস্য করতে চান তখন আপেক্ষিক অবস্থানটি ব্যবহার করুন যাতে আপনার কোনও মার্জিন, প্যাডিং ইত্যাদি যুক্ত করতে হবে না যদি উপাদানটির একটি অবস্থানের তুলনামূলক অবস্থান থাকে এবং এতে একটি সন্তানের উপাদান থাকে। এখানে আমরা এর পিতামাতার তুলনায় তুলনামূলকভাবে পরিমাপ করতে পারি। আপনি যদি সন্তানের সাথে 10% প্রস্থ যুক্ত করেন, তার অর্থ (প্রস্থ + প্যাডিং) x10%। তবে আপনি আপেক্ষিক কীওয়ার্ডটি যুক্ত না করলে আপনি প্রস্থ 10% পাবেন। তা ছাড়া, আপেক্ষিকের সবচেয়ে গুরুত্বপূর্ণ ব্যবহার হ'ল; আপনি যে কোনও উপাদান শীর্ষে অবস্থান করতে পারেন।
position: relativeএবং আপনি কখনই টাইপ করেনposition: staticনা :)