সিএসএস অবস্থান: উদাহরণ

. বিন্যাস-নতুনদের প্রায়ই সিএসএস মাধ্যমে পজিশনিং উপাদানের সঙ্গে অসুবিধা আছে। Position куда проще в освоении, чем кажется на первый взгляд. বস্তুত, সিএসএস অবস্থান সম্পত্তি অনেক সহজ তুলনায় এটি প্রথম নজরে মনে হয় শিখতে হয়। তাদের নিয়ন্ত্রণ করার মাধ্যমে, আপনি যার সাহায্যে আপনি ঠিক জায়গায় সব পৃষ্ঠা উপাদানগুলি সাজাতে পারেন একটি শক্তিশালী হাতিয়ার পেতে। добиться результата, нужно знать обо всех существующих значениях, поскольку принципы их действия сильно различаются কিন্তু অর্ডার ফলাফল পেতে, আপনি সমস্ত বিদ্যমান মান সম্পর্কে জানা প্রয়োজন কারণ তাদের কর্মের নীতি খুব ভিন্ন

ডকুমেন্ট প্রবাহ সুনির্দিষ্ট

работает с потоком веб-страницы. অবস্থান সিএসএস ওয়েব পেজ প্রবাহ সঙ্গে কাজ করে। কিভাবে এই বুঝা যায়? html- разметке. ডিফল্ট হিসাবে, সমস্ত পৃষ্ঠা উপাদানগুলি ক্রমে আপনি তাদের html- মার্কআপ তৈরি সাজানো হয়। header расположен над тегом footer, то и на странице он будет отображаться выше. হেডার TAG ট্যাগ পাদচরণ অবস্থিত, এবং তারপর যদি পৃষ্ঠা উপরে প্রদর্শিত হবে। footer в html над «хедером», «подвал» страницы будет отображаться над «шапкой». বিপরীতভাবে, যদি কোনো কারণে আপনি "Heder" এ HTML এ একটি পাদলেখ স্থান করার সিদ্ধান্ত নেন, "বুনিয়াদ" পৃষ্ঠা "টুপি" উপরের প্রদর্শন করা হবে। এই ক্ষেত্রে, ব্লক-স্তরের উপাদান সমগ্র প্রস্থ তাদের জন্য উপলব্ধ ব্যাপৃত। ছোট হাতের, ঘুরে, এক সারি সাজানো থাকে, যখন না পুরোটাই নাও, এবং তারপর নতুন এক স্থানান্তরিত করা হবে। এই পদ্ধতি "নথির প্রবাহ।" বলা হয়

প্রবাহ ব্রাউজারটি ব্যবহৃত অবস্থান সম্পত্তি পরিবর্তন করতে . CSS এ। float, но его мы рассматривать не будем. এছাড়া ভাসা বৈশিষ্ট্য কারণে পরিবর্তিত হতে পারে, কিন্তু এটা বিবেচনা করা হবে না। পজিশনিং সদস্য সঙ্গে সাধারণ স্ট্রিম, যার পরে এটা ভিন্নভাবে আচরণ করে আরম্ভ করা হবে থেকে "পড়া" এ করা যেতে পারে। কিভাবে ঠিক - এটি সম্পত্তির ব্যবহৃত মান উপর নির্ভর করে।

সিএসএস অবস্থান: স্ট্যাটিক

или статическое позиционирование, является значением по умолчанию для всех блоков html, которые вы создали. অবস্থান: স্ট্যাটিক বা স্ট্যাটিক পজিশনিং সব এইচটিএমএল ব্লক আপনি তৈরি করেছেন যে জন্য পূর্বনির্ধারিত। স্বাভাবিক পরিস্থিতিতে, আপনি তার সাথে মোকাবেলা করতে হবে না। static. কোন অবরোধ করা বা লাইন কোন সব অবস্থানে সংজ্ঞায়িত যদি না হন, তাই এটি গুরুত্বপূর্ণ স্ট্যাটিক হয়। পৃষ্ঠায় যে উপাদান প্রবাহ অনুযায়ী প্রদর্শিত হয়। right/left или top/bottom, никакого эффекта не будет. আপনি তাকে সম্পত্তি অধিকার / বাম বা উপরের / নীচে দেন, তাহলে কোনো প্রভাব থাকবে না।

সিএসএস অবস্থান: সংশোধন করা হয়েছে

оказывается вне нормального потока документа. কখন এই সম্পত্তি ব্যবহার করে, উপাদান নথির স্বাভাবিক প্রবাহ বাইরে আছে। относительно окна браузера, независимо от того, как размещаются прочие компоненты. এখন তার অবস্থান ব্রাউজার উইন্ডো আপেক্ষিক গণনা করা হয়, নির্বিশেষে অন্য উপাদান অবস্থিত হয়। : fixed отправится в верхнюю часть страницы, прижмется к краю окна браузера, а прочие элементы займут его место в соответствии с потоком. অন্য কথায়, অবস্থানের সঙ্গে একটি ব্লক: সুনির্দিষ্ট করা থাকে পৃষ্ঠার উপরের, ব্রাউজার উইন্ডোর প্রান্ত বিরুদ্ধে চাপা ছেড়ে অন্যান্য উপাদানের প্রবাহ অনুযায়ী তার জায়গা নিতে।

সংশোধন করা হয়েছে স্থান উপাদানের প্রধান বৈশিষ্ট্য যে তারা অন্যান্য ব্লক এবং পৃষ্ঠার স্ট্রিং ওভারল্যাপ করতে পারে। : fixed будет будто бы оставаться на месте, не исчезая с экрана. অবস্থান ব্লক স্ক্রলিং কখন: সংশোধন করা হয়েছে কল্পনানুসারে পর্দা থেকে অদৃশ্য ছাড়া জায়গা থাকবে। যদি আপনি নেভিগেট করতে অথবা যার ব্যবহারকারী সবসময় অ্যাক্সেস থাকতে হবে প্রয়োজন মতো, এই দরকারী। যদি আপনি পৃষ্ঠার একটি নির্দিষ্ট অংশে একটি দ্রুত স্ক্রল বাটন স্থাপন করতে চান স্থায়ী পজিশনিং এছাড়াও ব্যবহার করা হয়।

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

. এই সম্পত্তি ব্যবহার আপেক্ষিক পজিশনিং বলা হয়। : relative, тот останется на своем месте. আপনি আইটেম সম্পত্তি অবস্থান সেট করেন তাহলে: আপেক্ষিক তিনি তার জায়গা থাকবে। right/left и top/bottom. এক নজরে, কিছুই অনেক হবে, কিন্তু সব পরিবর্তন যদি আরও ব্যবহার বৈশিষ্ট্য ডান / বাম এবং শীর্ষ / নীচে। তারা তার অবস্থান কম্পোনেন্ট আপেক্ষিক চলাচল নিয়ন্ত্রণ করতে ব্যবহার করা যাবে। останутся на своих положениях, не обращая внимания на освободившееся место . স্পট যেখানে অবরোধ করা বা লাইন ব্যবহার করা হয় এ, একটি খালি স্থান হবে - অন্য উপাদান, তাদের অবস্থানকে থাকা কর্মখালি মনোযোগ পরিশোধ না।

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

পরম অবস্থান

সবচেয়ে আকর্ষণীয় এবং সবচেয়ে ঘন ঘন ব্যবহৃত অপশনের একটি। বৈশিষ্ট্য অবস্থান ব্যবহার করার সময় absolute положение компонента страницы будет высчитываться относительно окна браузера. পৃষ্ঠা উপাদানের পরম অবস্থানের মান ব্রাউজার উইন্ডো আপেক্ষিক গণনা করা হবে। элементы (не являющиеся абсолютно позиционированными) словно «забудут» о существовании «собрата» с Position : absolute и займут его место в потоке. অন্যান্য উপাদানের (অ-একেবারে স্থান) -এর মত অবস্থান অস্তিত্বের "ভাই" সম্বন্ধে "ভুলে যাওয়া": পরম এবং স্ট্রিম তার জায়গা নিতে হবে। : fixed, но есть и серьезные различия. মনে হবে যে সবকিছু ঠিক অবস্থান ক্ষেত্রে হিসাবে একই: সুনির্দিষ্ট করা থাকে, কিন্তু সেখানে গুরুত্বপূর্ণ পার্থক্য রয়েছে।

top/right/bottom/left. প্রথমত, উপাদান অবস্থান অবাধে নিয়ন্ত্রণ করা যায় - এই সম্পত্তি শীর্ষ / ডান / নীচে / বাম জন্য ব্যবহৃত হয়। bottom : 100px, блок «оттолкнется» от нижней част страницы на 100 пикселей. উদাহরণস্বরূপ, যদি আপনি নীচে মান সেট: 100px, ব্লক পৃষ্ঠা 100 পিক্সেল নিচ থেকে "বন্ধ ধাক্কা"। দ্বিতীয়ত, স্ক্রলিং যখন "পরম" কম্পোনেন্ট পরিবর্তে একটি পৃষ্ঠায় নেভিগেট করতে থাকার জায়গা থাকবে।

পিতা বা মাতা উপাদানের সঙ্গে পারস্পরিক ক্রিয়া পরম ইউনিট

আপনার কখনই স্থান উপাদান উপর এমনকি আরো সুনির্দিষ্ট নিয়ন্ত্রণ অর্জন করতে পারেন। : fixed, relative или absolute. এই কাজের জন্য, আপনি তার পিতা বা মাতা সম্পত্তি অবস্থান সেট করতে হবে: সুনির্দিষ্ট করা থাকে, আপেক্ষিক বা পরম।

একটি উদাহরণ বিবেচনা করুন। div с классом relative-div, внутри которого размещается div с классом absolute-div. আপনি আপেক্ষিক-এর div একটি বর্গ, যা ভিতরে পরম-এর div বর্গ সঙ্গে একটি div স্থাপন করা হয় সঙ্গে একটি div আছে না। : absolute. পরম আমরা অন্দর ইউনিট সম্পত্তি অবস্থান সেট করুন। তিনি অবিলম্বে স্ট্রীম থেকে "বন্ধ লাগে" এবং কারণ এখন তার অবস্থান ব্রাউজার উইন্ডো আপেক্ষিক গণনা করা হয়, উপরের স্থানে অবস্থিত। relative-div свойство Position : relative и «блудный сын» возвращается на место. এখন বর্গ আপেক্ষিক-DIV আছে অবস্থান সম্পত্তি দিয়ে নির্দিষ্ট ব্লক: আপেক্ষিক এবং "অমিতব্যয়ী পুত্র" জায়গায় ফিরে এসেছে। প্রায়। বস্তুত, এটা পিতা বা মাতা উপাদান উপরের বাম প্রান্তে উপস্থিত হয়।

কেন এমন হচ্ছে? : absolute. নির্দিষ্টতা বৈশিষ্ট্য অবস্থানে ডিল: পরম। static, позиция начинает зависеть от родительского элемента. ডিফল্টরূপে, তার অবস্থান আপনার ব্রাউজার উপর নির্ভর করে, কিন্তু যদি "পিতা বা মাতা" এছাড়াও কিছুই কিন্তু স্ট্যাটিক হিসাবে অবস্থান করে, অবস্থান পিতা বা মাতা উপাদান উপর নির্ভর করে শুরু হয়। এই মহান কারণ আপনার ব্রাউজার উইন্ডোতে আপেক্ষিক proschityvaya বিশাল সংখ্যা ছাড়া যে কোন জায়গায় উপাদান স্থাপন করতে পারেন হয়। ভর্তি প্রায়ই আইকন, বোতাম এবং অন্যান্য ছোট আইটেম স্থাপন করতে ব্যবহৃত হয়।

অবস্থান সিএসএস কেন্দ্রিক

প্রধান অসুবিধা নতুনদের মধ্যে অন্যতম উল্লম্বভাবে এবং অনুভূমিকভাবে উপাদান কেন্দ্র হয়। , сделать это проще простого. সঠিকভাবে অবস্থান সম্পত্তি ব্যবহার করে, এটিকে সহজ করে তোলে। সিএসএস অবস্থান: কেন্দ্রে পরম নিম্নরূপ সেট করা হয়। iv с классом absolute-div, который находится в «диве» с классом relative-div. ধরুন, আপনি একটি বর্গ ঘ ঈ পরম-DIV আছে, কোন ক্লাশে আপেক্ষিক-DIV আছে থেকে "ডিভা" এ আছে যাক। "মূল" এবং তার প্রস্থ সম্পূর্ণ পৃষ্ঠার প্রস্থ সমান করার স্থান আপেক্ষিক। и высоту 400 px, абсолютное позиционирование и по умолчанию располагается в верхнем левом углу родительского элемента. "বংশধর" একটি প্রস্থ এবং 400 px আকারে, পরম পজিশনিং উচ্চতা আছে, এবং পিতা বা মাতা উপাদান উপরের বাঁদিকের কোণায় ডিফল্টরূপে অবস্থিত।

top: 50 % и left: 50 %. 50% এবং বাম: 50% - সমস্ত আপনাকে যা করতে হবে পরম উপাদান শীর্ষ সেট করতে হয়। প্রায় সম্পন্ন হযেছে! сдвинулся с места и оказался почти в центре, но не совсем. পরম-DIV আছে Budge এবং প্রায় কেন্দ্রে ছিল, কিন্তু বেশ। মানে "পিতা বা মাতা" তার শেষ কহা, এবং আমরা ব্লক কেন্দ্রে পেতে প্রয়োজন কেন্দ্রে হতে প্রমাণিত 'বংশ। " margin-left и margin-right со значениями -200 px. এই কাজের জন্য, আপনি তাকে মান -200 পিক্সেল সঙ্গে একটি মার্জিন-বাম এবং মার্জিন ডান জিজ্ঞাসা করা প্রয়োজন। সুতরাং, আমরা তার উচ্চতা এবং প্রস্থ অর্ধেক উপর একেবারে স্থান ব্লক নামান। সব মাঝখানে!

ওভারল্যাপিং উপাদান

সমস্যা কঠিন হতে পারে, প্রথম নজরে, তাদের "প্রতিবেশীদের" এ স্থান উপাদান "আরোপের"। : fixed будет перекрывать все, что расположено на странице. উদাহরণস্বরূপ, কম্পোনেন্ট অবস্থান: সংশোধন করা হয়েছে সব পৃষ্ঠাতে অবস্থিত ওভাররাইড করবে। z-index, однако помните, что оно работает только для позиционированных элементов. অবস্থা প্রতিকার, আপনি Z-সূচক বৈশিষ্ট্য ব্যবহার করেন, কিন্তু মনে রাখবেন যে এটি শুধুমাত্র স্থান উপাদানের জন্য কাজ করে পারবেন না। সুতরাং, যদি আপনি নির্ধারণ স্থান উপাদান উপরে একটি ব্লক স্থাপন করতে চান, এই ইউনিট এছাড়াও পজিশনিং সেট করতে হবে। উদাহরণস্বরূপ, একটি আপেক্ষিক।

учший способ освоить позиционирование – рассматривать примеры Position CSS, экспериментировать и пробовать что-то свое. একটি ভাল উপায় পজিশনিং মাস্টার - বিবেচিত উদাহরণ অবস্থান সিএসএস, পরীক্ষা এবং ভিন্ন কিছু চেষ্টা করুন। calc() – это даст возможность более гибко настраивать расположение. ফাংশন Calc () সাথে এটি ব্যবহার করা শিখতে চেষ্টা করে দেখুন - এই অবস্থান সমন্বয় করতে বৃহত্তর নমনীয়তা সক্ষম করবে। যাইহোক, মনে রাখবেন যে এই সম্পত্তি সমগ্র "নেট" বিষয়শ্রেণীতে অন্তর্ভুক্ত নিবন্ধসমূহ নির্মাণের জন্য উদ্দেশ্যে নয়। এটি দিয়ে, আপনি অপেক্ষাকৃত ছোট উপাদান সরানো প্রয়োজন, অথবা বিভ্রান্ত পেতে খুব সহজ হতে পারে।