സി.എസ്.എസ് സ്ഥാനം: ഉദാഹരണങ്ങൾ

. ലേഔട്ട്-തുടക്കക്കാർ പലപ്പോഴും സിഎസ്എസ് വഴി സ്ഥാനനിർണ്ണയം ഘടകങ്ങൾ പ്രയാസകരമായി. Position куда проще в освоении, чем кажется на первый взгляд. വാസ്തവത്തിൽ, സിഎസ്എസ് സ്ഥാനം പ്രോപ്പർട്ടി ആദ്യം ഒറ്റനോട്ടത്തിൽ തോന്നുന്നു അധികം പഠിക്കാൻ വളരെ എളുപ്പമാണ്. അവരെ ഹൃദിസ്ഥമാക്കി, നിങ്ങൾ ശരിയായ സ്ഥലങ്ങൾ എല്ലാ പേജ് ഘടകങ്ങൾ ക്രമീകരിക്കാനാകും ഏത് ഒരു ശക്തമായ ഉപകരണം ലഭിക്കും. добиться результата, нужно знать обо всех существующих значениях, поскольку принципы их действия сильно различаются എന്നാൽ ഫലങ്ങൾ ലഭിക്കാൻ വേണ്ടി, നിങ്ങൾ, നിലവിലുള്ള എല്ലാ മൂല്യങ്ങളും കുറിച്ച് അറിയേണ്ടത് അവരുടെ പ്രവർത്തനങ്ങൾ തത്വങ്ങൾ വളരെ വ്യത്യസ്തമാണ് കാരണം

പ്രമാണം ഒഴുക്ക് കൃത്യമായ

работает с потоком веб-страницы. സ്ഥാനം സി.എസ്.എസ് വെബ് പേജ് ഒഴുക്ക് പ്രവർത്തിക്കുന്നു. ഈ എങ്ങനെ മനസ്സിലാക്കാൻ? html- разметке. സ്ഥിരമായി, എല്ലാ പേജ് ഘടകങ്ങൾ നിങ്ങൾ ഹ്ത്മ്ല്- മാർക്കപ്പ് അവരെ സൃഷ്ടിച്ച ക്രമത്തിൽ ക്രമീകരിച്ചിരിക്കുന്നത്. header расположен над тегом footer, то и на странице он будет отображаться выше. തലക്കെട്ട് ടാഗ് ടാഗ് അടിക്കുറിപ്പ് സ്ഥിതി എങ്കിൽ, പിന്നെ അത് പേജ് മുകളിൽ പ്രദർശിപ്പിക്കും. footer в html над «хедером», «подвал» страницы будет отображаться над «шапкой». അതുപോലെ തന്നെ, "ഹെദെര്", "അങ്കണം" പേജിൽ HTML ഒരു അടിക്കുറിപ്പ് സ്ഥാപിക്കുക തീരുമാനിക്കുകയാണെങ്കിൽ ചില കാരണത്താൽ നിങ്ങൾ "തൊപ്പി" മുകളിൽ പ്രദർശിപ്പിക്കും. ഈ സാഹചര്യത്തിൽ, ബ്ലോക്ക്-ലെവൽ ഘടകങ്ങൾ അവർക്ക് ലഭ്യമായ മുഴുവൻ വീതി അളന്ന്. ചെറിയ, അതാകട്ടെ, ഒരു വരി ക്രമീകരിച്ചിരിക്കുന്നത് എല്ലാ എടുക്കരുത് താനും, തുടർന്ന് പുതിയ ഒരു കൈമാറ്റം ചെയ്യുന്നതാണ്. ഈ പ്രക്രിയ "പ്രമാണത്തിന്റെ ഒഴുക്ക്." വിളിക്കുന്നു

ഉപയോഗിച്ച സ്ഥാനം പ്രോപ്പർട്ടി ഒഴുക്ക് സ്വഭാവത്തിൽ മാറ്റം . CSS- ൽ. float, но его мы рассматривать не будем. അത് ഫ്ലോട്ട് ഉള്ള വ്യത്യാസം, പക്ഷേ അത് പരിഗണിക്കില്ല. സ്ഥാന നിർണ്ണയ അംഗം ശേഷം ഇത് വേറൊരു രീതിയിൽ തുടങ്ങും സാധാരണ സ്ട്രീം, നിന്ന് "വീഴും" വരുത്താൻ കഴിയില്ല കൂടെ. എങ്ങനെ കൃത്യമായി - അത് പ്രോപ്പർട്ടിയുടെ ഉപയോഗിച്ച മൂല്യം ആശ്രയിച്ചിരിക്കുന്നു.

സി.എസ്.എസ് സ്ഥാനം: സ്റ്റാറ്റിക്

или статическое позиционирование, является значением по умолчанию для всех блоков html, которые вы создали. സ്ഥാനം: സ്റ്റാറ്റിക്, അല്ലെങ്കിൽ സ്റ്റാറ്റിക് സ്ഥാനനിർണ്ണയം നിങ്ങൾ സൃഷ്ടിച്ച എല്ലാ HTML ബ്ലോക്കുകൾ സ്ഥിരമായിരിക്കും. സാധാരണ സാഹചര്യങ്ങളിൽ, നിങ്ങൾ അവനെ കൈകാര്യം ഇല്ല. static. ബ്ലോക്ക് അല്ലെങ്കിൽ ലൈൻ ഏത് സ്ഥാനത്ത് നിർവചിച്ചിരിക്കുന്നത് എങ്കിൽ, അങ്ങനെ അത് പ്രധാനപ്പെട്ട സ്ഥിരമാണ്. പേജിൽ ആ ഘടകം ഒഴുക്ക് അനുസരിച്ച് പ്രദർശിപ്പിച്ചിരിക്കുന്നു. right/left или top/bottom, никакого эффекта не будет. നിങ്ങൾ അവനെ പ്രോപ്പർട്ടി ശരിയായ / ഇടത് അല്ലെങ്കിൽ മുകളിൽ / താഴെ കാണിക്കും, യാതൊരു മാറ്റവും ആയിരിക്കും.

സി.എസ്.എസ് സ്ഥാനം: നിശ്ചിത

оказывается вне нормального потока документа. ഈ പ്രോപ്പർട്ടി ഉപയോഗിക്കുമ്പോൾ, ഘടകം പ്രമാണം സാധാരണ ഒഴുക്ക് പുറത്താണ്. относительно окна браузера, независимо от того, как размещаются прочие компоненты. ഇപ്പോൾ തന്റെ സ്ഥാനം പരിഗണിക്കാതെ മറ്റ് ഘടകങ്ങൾ എങ്ങനെ സ്ഥിതി ചെയ്യുന്നത്, ബ്രൗസർ വിൻഡോ കണക്കുകൂട്ടുന്ന ആണ്. : fixed отправится в верхнюю часть страницы, прижмется к краю окна браузера, а прочие элементы займут его место в соответствии с потоком. മറ്റു വാക്കുകളിൽ, സ്ഥാനം ഒരു തടയൽ: നിശ്ചിത ബ്രൗസർ വിൻഡോ വായ്ത്തലയാൽ നേരെ അമർത്തി, പേജിന്റെ മുകളിൽ വിട്ടു, മറ്റ് ഘടകങ്ങൾ ഒഴുക്ക് പ്രകാരം അതിന്റെ നടക്കുന്നത്.

നിശ്ചിത സ്ഥാനം മൂലകങ്ങളുടെ പ്രധാന സവിശേഷത അവർ മറ്റു ബ്ലോക്കിലും പേജ് സ്ട്രിംഗ് ഓവലാപ്പ്. : fixed будет будто бы оставаться на месте, не исчезая с экрана. സ്ക്രോൾ ചെയ്യുമ്പോൾ സ്ഥാനം കൊണ്ട് തടയൽ: സ്ഥിര വാദം സ്ക്രീനിൽ കാണാതാവുന്നത് ഇല്ലാതെ പകരം തുടരും. നിങ്ങളുടെ ഭ അല്ലെങ്കിൽ ഉപയോക്താവിന് എപ്പോഴും ആക്സസ് ഉണ്ടായിരിക്കണം ഏത്, പോലെ ആവശ്യമെങ്കിൽ ഈ ഉപയോഗപ്പെടുന്നു. പേജിന്റെ ഒരു ഭാഗത്ത് പെട്ടെന്നുള്ള സ്ക്രോൾ ബട്ടൺ സ്ഥാപിക്കുന്നത് ചെയ്യണമെങ്കിൽ നിശ്ചിത ഉപയോഗിക്കും.

സി.എസ്.എസ് സ്ഥാനം: ബന്ധു

. ഈ പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നത് ആപേക്ഷിക സ്ഥാനനിർണ്ണയം വിളിക്കുന്നു. : relative, тот останется на своем месте. ഇനം പ്രോപ്പർട്ടി സ്ഥാനം ക്രമീകരിച്ചാൽ: ബന്ധു, അവൻ അതിന്റെ സ്ഥലത്തു തുടരും. right/left и top/bottom. , വളരെ ഒന്നും സംഭവിക്കുന്നില്ല, ആദ്യ നോട്ടത്തിൽ കൂടുതൽ ഉപയോഗിക്കുന്ന ഇടത് വലത് / മുകളിൽ / താഴെ എല്ലാ മാറ്റം. അവർ അതിന്റെ ലൊക്കേഷനിലേക്കുള്ള ഘടക ബന്ധു ചലനം നിയന്ത്രിക്കാൻ ഉപയോഗിക്കാൻ കഴിയും. останутся на своих положениях, не обращая внимания на освободившееся место . എവിടെ തടയൽ അല്ലെങ്കിൽ ലൈൻ ഉപയോഗിക്കുന്ന സ്ഥലത്ത്, ഒരു സ്ഥലം തന്നെ - മറ്റ് ഘടകങ്ങൾ ഒഴിവിലേക്കാണ് ശ്രദ്ധ നൽകാത്തതിന്റെ അവരുടെ സ്ഥാനങ്ങൾ നിലനിൽക്കും.

നിങ്ങൾ നീക്കുമ്പോൾ ഘടകം പേജിന്റെ ചുറ്റുമുള്ള ഭാഗങ്ങൾ സ്ഥാനം ബാധിക്കില്ല. താരതമ്യേന സ്ഥാനം ബ്ലോക്ക് അവരെ തടയാം എങ്കിലും അവർ സ്ഥലത്തു തുടരും. തന്നെ, പ്രോപ്പർട്ടി അപൂർവ്വമായി ഉപയോഗിക്കുന്നു. സാധാരണയായി അത് താഴെ അയാളാകട്ടെ, സംയോജിച്ച് ഉപയോഗിക്കുന്നു.

കേവല

ഏറ്റവും രസകരമായ ഏറ്റവും സാധാരണയായി ഉപയോഗിക്കപ്പെടുന്ന ഓപ്ഷനുകൾ ഒരു. പ്രോപ്പർട്ടികൾ സ്ഥാനം ഉപയോഗിക്കുമ്പോൾ absolute положение компонента страницы будет высчитываться относительно окна браузера. പേജ് ഘടകം സമ്പൂർണ്ണ സ്ഥാനം മൂല്യം ബ്രൗസർ വിൻഡോ അപേക്ഷിച്ച് കണക്കാക്കും കൂടെ. элементы (не являющиеся абсолютно позиционированными) словно «забудут» о существовании «собрата» с Position : absolute и займут его место в потоке. മറ്റ് ഘടകങ്ങൾ (-പഴയത് നോൺ സ്ഥാനം) സ്ഥാനം നിലനില്പ്പുമായി "സഹോദരൻ" കുറിച്ച് "മറക്കരുത്" പോലെ: സമ്പൂർണവും സ്ട്രീമിൽ നിലക്കും. : fixed, но есть и серьезные различия. ഇത് എല്ലാം സ്ഥാനം കാര്യത്തിലെന്നപോലെ കൃത്യമായി ആണോ എന്ന് തോന്നുന്നില്ല: പരിഹരിച്ചത്, എന്നാൽ പ്രധാനപ്പെട്ട വ്യത്യാസങ്ങൾ ഉണ്ട്.

top/right/bottom/left. ഒന്നാമതായി, ഘടകത്തിന്റെ സ്ഥാനം സ്വതന്ത്രമായി നിയന്ത്രിക്കാൻ കഴിയും - ഈ പ്രോപ്പർട്ടി മുകളിൽ / ശരിയായ / താഴെ / ഇടത് ഉപയോഗിക്കുന്നു. bottom : 100px, блок «оттолкнется» от нижней част страницы на 100 пикселей. ഉദാഹരണത്തിന്, നിങ്ങൾ താഴെ മൂല്യം നിർത്തുന്നില്ലെങ്കിൽ: ൧൦൦പ്ക്സ, ബ്ലോക്ക് പേജ് 100 പിക്സൽ അടിയിൽ നിന്നും "ഓഫ്" പുഷ്. രണ്ടാമതായി, "കേവല" ഘടകം സ്ക്രോളിംഗ് പകരം ഒരു പേജിലേക്ക് നാവിഗേറ്റ് ബുദ്ധിമുട്ടിനോട്, സ്ഥലത്തു തുടരും.

പാരന്റ് ഘടകങ്ങൾ പ്രതിപ്രവർത്തനം കേവല യൂണിറ്റുകൾ

നിങ്ങൾ പഴയത് സ്ഥാനം ഘടകം മേൽ കൂടുതൽ കൃത്യമായ നിയന്ത്രണം നേടാൻ കഴിയും. : fixed, relative или absolute. സ്ഥിര, ആപേക്ഷിക അല്ലെങ്കിൽ പരമമായ: ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾ മാതൃ പ്രോപ്പർട്ടി സ്ഥാനം സജ്ജമാക്കേണ്ടതുണ്ട്.

ഒരു ഉദാഹരണം നോക്കുക. div с классом relative-div, внутри которого размещается div с классом absolute-div. നിങ്ങൾക്ക് ഉള്ളിൽ കേവല-കളരി എന്ന ക്ലാസ് ഉപയോഗിച്ച് കളരി സ്ഥാപിച്ചിട്ടുള്ള ബന്ധു-കളരി ഒരു ക്ലാസ്, ഒരു കളരി ഉണ്ടോ. : absolute. കേവല: ഞങ്ങൾ ഇൻഡോർ യൂണിറ്റ് പ്രോപ്പർട്ടി സ്ഥാനം വെച്ചു. ഉടൻ തന്നെ സ്ട്രീമിൽ നിന്നും "നീക്കി" ഇപ്പോൾ അതിന്റെ സ്ഥാനം ബ്രൗസർ വിൻഡോ അപേക്ഷിച്ച് കണക്കു കാരണം, മുകളിൽ എവിടെയോ ആണ്. relative-div свойство Position : relative и «блудный сын» возвращается на место. ഇപ്പോൾ ക്ലാസ് ആപേക്ഷിക-കളരി സ്ഥാനം പ്രോപ്പർട്ടി തടയൽ നൽകിയ: ആപേക്ഷിക "മുടിയനായ മകൻ" വീണ്ടും സ്ഥലത്തു ആണ്. ഏതാണ്ട്. വാസ്തവത്തിൽ, അത് മൂല ഘടകം മുകളിൽ ഇടത് മൂലയിൽ ദൃശ്യമാകുന്നു.

എന്തുകൊണ്ട് ഈ സംഭവിക്കുന്നത്? : absolute. വ്യക്തത പ്രോപ്പർട്ടികൾ സ്ഥാനത്ത് പ്രവർത്തിച്ചു: കേവല. static, позиция начинает зависеть от родительского элемента. സ്വതവേ, അതിന്റെ സ്ഥാനം നിങ്ങളുടെ ബ്രൗസറിൽ ആശ്രയിച്ചിരിക്കുന്നു, എന്നാൽ "പാരന്റ്" പുറമേ സ്റ്റാറ്റിക് അല്ലാതെ എന്ത് സ്ഥാനം എങ്കിൽ, സ്ഥാനം മൂല ഘടകം ആശ്രയിച്ചിരിക്കുന്നു തുടങ്ങുന്നു. ബ്രൗസർ വിൻഡോ അപേക്ഷിച്ച് പ്രൊസ്ഛിത്യ്വയ വലിയ നമ്പറുകൾ കൂടാതെ എവിടെയും ഘടകം സാധിക്കും കാരണം ഈ വലിയ ആണ്. അഡ്മിഷൻ പലപ്പോഴും ഐക്കണുകൾ, ബട്ടണുകളും മറ്റ് ചെറിയ ഇനങ്ങൾ സ്ഥാപിക്കുക ഉപയോഗിക്കുന്നു.

സ്ഥാനം സിഎസ്എസ് കേന്ദ്രീകരിച്ചുള്ള

പ്രധാന ബുദ്ധിമുട്ടുകൾ തുടക്കക്കാർ ഒരു ലംബമായി ഒപ്പം തിരശ്ചീനമായി ഘടകം മധ്യഭാഗത്തേക്ക് ആണ്. , сделать это проще простого. ശരിയായി സ്ഥാനം പ്രോപ്പർട്ടി ഉപയോഗിച്ച്, അത് എളുപ്പമാക്കുന്നു. സി.എസ്.എസ് സ്ഥാനം താഴെ കേവല കേന്ദ്രത്തിൽ സജ്ജമാക്കിയിരിക്കുന്നു. iv с классом absolute-div, который находится в «диве» с классом relative-div. നിങ്ങൾ ഒരു ക്ലാസ് ഡി IV കേവല-കളരി, ക്ലാസ് ആപേക്ഷിക-കളരി വരെ "ദിവ" ഇരിക്കുന്ന ഉണ്ടു പറയട്ടെ. "പാരന്റ്" അതിന്റെ വീതി പേജിൻറെ വീതി സമ പരിസരത്തിൽ ബന്ധു. и высоту 400 px, абсолютное позиционирование и по умолчанию располагается в верхнем левом углу родительского элемента. "പിൻഗാമിയായ" ഒരു വീതി 400 ബിന്ദു ഉയരം, കേവല ഉണ്ട്, മൂല ഘടകം മുകളിൽ ഇടത് മൂലയിൽ സ്വതവേ സ്ഥിതി.

top: 50 % и left: 50 %. 50% ഇടത്തോട്ടും: 50% - നിങ്ങൾ ചെയ്യേണ്ടത് എല്ലാ കേവല ഘടകം മുകളിൽ സജ്ജമാക്കാൻ ആണ്. ഏകദേശം പൂർത്തിയാക്കി! сдвинулся с места и оказался почти в центре, но не совсем. കേവല-DIV ജഗതിയുടെ കേന്ദ്ര ഏതാണ്ട്, എന്നാൽ വളരെ അല്ല. അർഥം "പാരന്റ്" തന്റെ അവസാനം വിവരിച്ചുതരാം, ഞങ്ങൾ തടയൽ കേന്ദ്രത്തിൽ പരിശോധിക്കേണ്ട കേന്ദ്രത്തിൽ തെളിഞ്ഞു "സന്തതി." margin-left и margin-right со значениями -200 px. ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾ അവനെ മൂല്യങ്ങൾ -200 ബിന്ദു ഒരു മാർജിൻ-ഉപേക്ഷിച്ച് മാർജിൻ-വലത് ചോദിക്കണം. അങ്ങനെ, ഞങ്ങൾ അതിന്റെ ഉയരവും പകുതി വ്യാപ്തി ന് തികച്ചും സ്ഥാനം ബ്ലോക്ക് shift. എല്ലാ അത് നടുവിൽ!

കവിഞ്ഞു ഘടകങ്ങൾ

പ്രശ്നം, ആദ്യ നോട്ടത്തിൽ, ബുദ്ധിമുട്ടായിരിക്കും അവരുടെ "അയൽക്കാർ" എന്ന സ്ഥാനം ഘടകങ്ങൾ "ചുമത്തപ്പെടുമെന്ന്". : fixed будет перекрывать все, что расположено на странице. ഉദാഹരണത്തിന്, ഘടകം സ്ഥാനം: നിശ്ചിത എല്ലാ പേജിൽ സ്ഥിതി കടത്തിവെട്ടുന്നു. z-index, однако помните, что оно работает только для позиционированных элементов. പരിഹാരങ്ങൾ, നിങ്ങൾ ഇസഡ് സൂചിക വിശേഷതകൾ ഉപയോഗിക്കാം, എന്നാൽ മാത്രമേ പരിസരത്തിൽ ഘടകങ്ങൾ പ്രവർത്തിക്കുന്ന ഓർമിക്കാൻ കഴിയും. അതിൻപ്രകാരം, സ്ഥിര സ്ഥാനം ഘടകത്തിന്റെ മുകളിൽ ഒരു ബ്ലോക്ക് സ്ഥാപിക്കുകയും ചെയ്യണമെങ്കിൽ, ഈ യൂണിറ്റ് പുറമേ സ്ഥാനനിർണ്ണയം സജ്ജമാക്കാൻ വരും. ഉദാഹരണത്തിന്, ഒരു ബന്ധു.

учший способ освоить позиционирование – рассматривать примеры Position CSS, экспериментировать и пробовать что-то свое. സ്ഥാനനിർണ്ണയം അവഗാഹം ഒരു മികച്ച വഴി - പരീക്ഷണങ്ങൾ വ്യത്യസ്ത എന്തെങ്കിലും പരീക്ഷിക്കാൻ, ഉദാഹരണങ്ങൾ സ്ഥാനം സി.എസ്.എസ് പരിഗണിക്കും. calc() – это даст возможность более гибко настраивать расположение. ) ഫംഗ്ഷൻ റൈറ്റര് (സംയോജിച്ച് അത് ഉപയോഗിക്കാൻ അറിയാൻ ശ്രമിക്കുക - ഈ സ്ഥാനം ക്രമീകരിക്കുന്നതിന് ഇവ പ്രാപ്തമാക്കും. എന്നാൽ, ഈ പ്രോപ്പർട്ടി മുഴുവൻ "വല" പേജുകൾ പണിതു ഉദ്ദേശിച്ചുള്ളതല്ല ഓർക്കുക. ഇത് ഉപയോഗിച്ച്, നിങ്ങൾക്ക് താരതമ്യേന ചെറിയ ഘടകങ്ങൾ നീക്കാൻ വേണം, അല്ലെങ്കിൽ ആശയക്കുഴപ്പത്തിലാണ് നേടുകയും വളരെ എളുപ്പത്തിൽ കഴിയും.