,

,

,

. ടാഗ് ചെയ്യുക
ഗ്രിഡുകൾ സൃഷ്‌ടിക്കാൻ ആധുനിക വെബ്‌സൈറ്റുകളുടെ ലേഔട്ടിൽ പലപ്പോഴും ഉപയോഗിക്കുന്നു, മാത്രമല്ല ചിലതരം ബ്ലോക്ക് അല്ലെങ്കിൽ കണ്ടെയ്‌നർ എന്നാണ് അർത്ഥമാക്കുന്നത്. അതിൽ മറ്റ് ടാഗുകൾ നെസ്റ്റ് ചെയ്യാനും സാധിക്കും, അത് എല്ലാ ബ്ലോക്ക് ഘടകങ്ങളിലും സാധ്യമല്ല
ഉപയോഗിക്കാൻ സൗകര്യപ്രദമാണ്. ബ്ലോക്കുകൾ സാധാരണയായി പരസ്പരം മുകളിൽ അടുക്കിയിരിക്കുന്നു, അവ ഇൻലൈൻ ഘടകങ്ങളിൽ ചേർക്കില്ല. HTML ഇൻലൈൻ ഘടകങ്ങൾ ടെക്‌സ്‌റ്റാണ്, അത് സ്റ്റൈൽ ചെയ്യാൻ CSS ഉപയോഗിക്കുന്നു.
ഒരു ഉള്ളടക്ക വീതി നൽകിയാൽ, വലത്, ഇടത് പാഡിംഗ്, മാർജിൻ, ബോർഡർ, വീതി എന്നിവയുടെ ആകെത്തുകയാണ് മൊത്തം ബ്ലോക്ക് വീതി. ഒരു നിശ്ചിത ഉയരത്തിൽ - മുകളിലും താഴെയുമുള്ള പാഡിംഗ്, അരികുകൾ, ബോർഡറുകൾ, ഉയരം എന്നിവയിൽ നിന്ന്. ബ്ലോക്ക് ഘടകങ്ങളിലെ വാചകം സ്ഥിരസ്ഥിതിയായി വിന്യസിച്ചിരിക്കുന്നു. അവയിലൊന്നിൽ ബ്ലോക്ക് ഘടകങ്ങളോടൊപ്പം ഇൻലൈൻ ഘടകങ്ങൾ അടങ്ങിയിട്ടുണ്ടെങ്കിൽ, ഇൻലൈൻ ഘടകങ്ങൾക്ക് ചുറ്റും ഒരു അജ്ഞാത ബ്ലോക്ക് സൃഷ്ടിക്കപ്പെടും. ഡിഫോൾട്ട് ശൈലി അതിൽ പ്രയോഗിക്കും. അതിൻ്റെ രക്ഷിതാവിന് നൽകിയിട്ടുള്ള നിർദ്ദിഷ്‌ട ശൈലിയും ഇത് അവകാശമാക്കും.
ഡോക്യുമെൻ്റ് ഫ്ലോ
CSS-ൽ വ്യക്തമാക്കിയിരിക്കുന്ന പ്രോപ്പർട്ടികൾ നിർണ്ണയിക്കുന്ന പേജ് ഘടകങ്ങൾ പ്രദർശിപ്പിക്കുന്ന ക്രമത്തെ ഫ്ലോ സൂചിപ്പിക്കുന്നു. ഈ സാഹചര്യത്തിൽ, സ്ഥിരസ്ഥിതിയായി, ബ്ലോക്കുകൾ മുകളിൽ നിന്ന് താഴേക്ക് അണിനിരക്കും, മതിയായ ഇടമില്ലെങ്കിൽ, ഇൻലൈൻ ടാഗുകൾ ഒരു പുതിയ ലൈനിലേക്ക് മാറ്റുകയും മുകളിൽ നിന്ന് താഴേക്കും ഇടത്തുനിന്ന് വലത്തോട്ടും ക്രമീകരിക്കുകയും ചെയ്യുന്നു. പേജിലെ ഒരു ഘടകത്തിൻ്റെ സ്ഥാനം കോഡിലെ അതിൻ്റെ സ്ഥാനത്തെ ആശ്രയിച്ചിരിക്കുന്നു: അത് ഉയർന്നതാണ്, നേരത്തെ അത് സ്ഥിതിചെയ്യുന്നു. ഓരോ ബ്ലോക്ക് ഘടകങ്ങളും അയൽക്കാരെ അകറ്റുന്ന ഒരു ദീർഘചതുരം പോലെ കാണപ്പെടുന്നു. പ്രത്യേക പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഈ സ്വഭാവം മാറ്റാൻ കഴിയും. CSS-ൽ ഒരു കണ്ടെയ്‌നറിൻ്റെ മധ്യഭാഗത്തോ വശങ്ങളിലോ ചില ബ്ലോക്കുകൾ വിന്യസിക്കുന്നതിനെ പൊസിഷനിംഗ് എന്ന് വിളിക്കുന്നു.
സ്ഥാനനിർണ്ണയ ഘടകങ്ങൾ
സമ്പൂർണ്ണവും ആപേക്ഷികവുമായ സ്ഥാനനിർണ്ണയം ഉപയോഗിച്ച് ബ്ലോക്കുകളുടെ സ്ഥാനം നിയന്ത്രിക്കാവുന്നതാണ്. ഒരു പേജിൻ്റെ വലിയ വിഭാഗങ്ങൾക്ക് ഒരു പ്രത്യേക സ്ഥാനം നൽകുന്നതിനും സങ്കീർണ്ണമായ ഇൻ്റർഫേസുകൾ, പോപ്പ്-അപ്പുകൾ, അലങ്കാര ഘടകങ്ങൾ എന്നിവ സൃഷ്ടിക്കുന്നതിനും പൊസിഷനിംഗ് ഉപയോഗിക്കുന്നു. CSS-ൽ ബ്ലോക്കുകൾ സ്ഥാപിക്കാൻ ഉപയോഗിക്കുന്ന പ്രധാന പ്രോപ്പർട്ടി സ്ഥാനം ആണ്. ഇതിന് നാല് പ്രധാന ഗുണങ്ങളുണ്ട്:
• ബന്ധു;
• കേവലം;
• ഉറപ്പിച്ചു;
• നിശ്ചലമായ.
അവരുടെ സഹായത്തോടെ, നിങ്ങൾക്ക് നാല് പാരാമീറ്ററുകളിൽ ഒന്ന് വ്യക്തമാക്കി ലേഔട്ട് മോഡുകൾ മാറാൻ കഴിയും: മുകളിൽ, വലത്, താഴെ അല്ലെങ്കിൽ ഇടത്. ലെയറുകൾ ഓർഡർ ചെയ്യുന്നതിനുള്ള ഒരു പ്രോപ്പർട്ടി കൂടിയുണ്ട് - z-ഇൻഡക്സ്. സ്റ്റാറ്റിക് പ്രോപ്പർട്ടി ഉപയോഗിച്ച് പൊസിഷനിംഗ് സാധാരണയായി ഉപയോഗിക്കാറില്ല, കാരണം ഇത് ബ്ലോക്കുകളുടെ സ്ഥിരസ്ഥിതി സ്ഥാനത്തെ സൂചിപ്പിക്കുന്നു. അതിനാൽ, ഏതെങ്കിലും പാരാമീറ്ററുകളുടെ ഉപയോഗം അതിനെ ഒരു തരത്തിലും ബാധിക്കില്ല. മറ്റ് മൂന്ന് പ്രോപ്പർട്ടികൾ ലേഔട്ടിനായി ഉപയോഗിക്കുന്നു: ആപേക്ഷികം, കേവലം, സ്ഥിരം.
ആപേക്ഷിക സ്ഥാനനിർണ്ണയം
CSS-ലെ ബ്ലോക്കുകളുടെ ആപേക്ഷിക സ്ഥാനനിർണ്ണയം, അതായത് സ്ഥാനം: ആപേക്ഷിക സ്വത്ത്, അർത്ഥമാക്കുന്നത് ഒരു ഘടകം നീക്കുകയും അതിൻ്റെ യഥാർത്ഥ സ്ഥാനം മാറ്റുകയും ചെയ്യാം എന്നാണ്. അത്തരമൊരു ബ്ലോക്ക് ഇപ്പോഴും സ്ട്രീമിൽ അവശേഷിക്കുന്നു. വാസ്‌തവത്തിൽ, നാടുവിട്ടത് അവനല്ല, അവൻ്റെ പകർപ്പാണ്. ബ്ലോക്ക് ഒരു ദിശയിലോ മറ്റൊന്നിലോ എത്രത്തോളം നീങ്ങുമെന്ന് കൃത്യമായി സൂചിപ്പിക്കാൻ പ്രോപ്പർട്ടി മൂല്യങ്ങൾ സജ്ജീകരിച്ചിരിക്കുന്നു. അവ മിക്കപ്പോഴും പിക്സലുകളിൽ അളക്കുന്നു. എന്നാൽ മറ്റ് യൂണിറ്റുകൾ ഉപയോഗിക്കുന്നത് സ്വീകാര്യമാണ്.

ആപേക്ഷിക സ്ഥാനനിർണ്ണയത്തിനായി പ്രോപ്പർട്ടികൾ ഉപയോഗിക്കുന്നു
ടോപ്പ് പ്രോപ്പർട്ടി ഒരു പ്രത്യേക ബ്ലോക്കിൻ്റെ പകർപ്പ് പ്രോപ്പർട്ടിയിൽ വ്യക്തമാക്കിയ പിക്സലുകളുടെ എണ്ണം കൊണ്ട് മുകളിലേക്കോ താഴേക്കോ നീക്കുന്നു. ഇത് ഉപയോഗിക്കുമ്പോൾ, താഴെയോ മുകളിലോ സ്ഥിതി ചെയ്യുന്ന ഘടകങ്ങൾ അവയുടെ സ്ഥലങ്ങളിൽ നിലനിൽക്കും, കാരണം യഥാർത്ഥത്തിൽ മാറ്റിയ ബ്ലോക്ക് എവിടെയും നീങ്ങുന്നില്ല.
താഴെയുള്ള പ്രോപ്പർട്ടി, മുകളിലെ പ്രോപ്പർട്ടിക്ക് എതിർ ദിശയിൽ ബ്ലോക്കിനെ നീക്കുന്നു. ഒരു പോസിറ്റീവ് മൂല്യം അതിനെ മുകളിലേക്ക് നീക്കാൻ സഹായിക്കുന്നു, കൂടാതെ നെഗറ്റീവ് മൂല്യം അതിനെ താഴേക്ക് നീക്കാൻ സഹായിക്കുന്നു. വലത്, ഇടത് ഗുണങ്ങൾ മൂലകത്തെ യഥാക്രമം വലത്തോട്ടും ഇടത്തോട്ടും നീക്കുന്നു. അവയെല്ലാം സംയോജിപ്പിച്ച്, നിങ്ങൾക്ക് പേജിലെ ബ്ലോക്കിൻ്റെ കൃത്യമായ സ്ഥാനം സജ്ജമാക്കാൻ കഴിയും, അത് ലംബവും തിരശ്ചീനവുമായ കോർഡിനേറ്റ് അക്ഷങ്ങൾക്കൊപ്പം മാറ്റും. നിങ്ങൾ ഇൻഡൻ്റുകൾ വർദ്ധിപ്പിക്കുകയാണെങ്കിൽ, അവ ബ്ലോക്കിൻ്റെ അരികിൽ നിന്നല്ല, മറിച്ച് അതിൻ്റെ കോപ്പി ഓഫ്സെറ്റിൽ നിന്ന് വശത്തേക്ക് കണക്കാക്കും.

സമ്പൂർണ്ണ സ്ഥാനനിർണ്ണയം
CSS-ലെ ബ്ലോക്കുകളുടെ സമ്പൂർണ്ണ സ്ഥാനനിർണ്ണയം അബ്സൊല്യൂട്ട് പൊസിഷൻ പ്രോപ്പർട്ടിയുടെ മൂല്യം കൊണ്ടാണ് വ്യക്തമാക്കുന്നത്. സ്ഥാനം പിടിച്ചിരിക്കുന്ന ഒരു ഘടകം ഡോക്യുമെൻ്റ് ഫ്ലോയിൽ നിന്ന് പൂർണ്ണമായും വീഴുന്നു, അതിൻ്റെ സ്ഥാനം അടുത്തുള്ള ബ്ലോക്കുകൾ എടുക്കുന്നു. അത്തരമൊരു മൂലകത്തിൻ്റെ വീതി അതിൻ്റെ ഉള്ളടക്കത്തെ ആശ്രയിച്ച് വലിച്ചുനീട്ടുന്നു, കൂടാതെ മുകളിൽ, ഇടത്, വലത്, താഴെയുള്ള പ്രോപ്പർട്ടികൾക്കായി ചില മൂല്യങ്ങൾ സജ്ജീകരിച്ച് ഇത് മാറ്റാനാകും. CSS-ലെ സമ്പൂർണ്ണ ബ്ലോക്ക് പൊസിഷനിംഗ് തലക്കെട്ടുകൾക്ക് ഉപയോഗപ്രദമാണ്. എന്നാൽ സ്ഥാനം: ബ്ലോക്ക് ഘടകങ്ങൾക്ക് മാത്രമല്ല, ഇൻലൈൻ ഘടകങ്ങൾക്കും കേവലം പ്രവർത്തിക്കുന്നു.
ഘടകങ്ങൾ കേന്ദ്രത്തിലേക്ക് വിന്യസിക്കുന്നു
പൂർണ്ണമായും ഇൻലൈൻ മൂലകം ഒരു ഇൻലൈൻ ഘടകത്തിന് സമാനമായി പ്രവർത്തിക്കും. അതിനാൽ, CSS ലെ ടെക്‌സ്‌റ്റ് നിയന്ത്രിക്കാനും പൊസിഷനിംഗ് ഉപയോഗിക്കാം. നിങ്ങൾക്ക് അതിൽ ചില പുതിയ പ്രോപ്പർട്ടികൾ പ്രയോഗിക്കാൻ കഴിയും, ഉദാഹരണത്തിന്, ഉയരവും വീതിയും മാറ്റുക. CSS-ലെ കേന്ദ്രീകരണവും ലംബ വിന്യാസവും നിരവധി ഗുണങ്ങളുടെ സംയോജനമാണ് ഉപയോഗിക്കുന്നത്. മുകളിലെ വസ്തുവിൻ്റെ ലംബ വിന്യാസം നിയന്ത്രിക്കുന്നു. നിങ്ങൾക്ക് CSS-ൽ ഒരു ബ്ലോക്ക് കേന്ദ്രീകരിക്കണമെങ്കിൽ, പ്രധാന കണ്ടെയ്‌നർ താരതമ്യേന സ്ഥാനം പിടിച്ചിരിക്കണം, ഒപ്പം വിന്യസിച്ച ഘടകം പൂർണ്ണമായും സ്ഥാനം പിടിച്ചിരിക്കണം. കണ്ടെയ്നറിന് ടോപ്പ് പ്രോപ്പർട്ടി സജ്ജീകരിക്കേണ്ടതുണ്ട്: 50%, കൂടാതെ മൂലകത്തെ അതിൻ്റെ പകുതി ഉയരത്തിൽ നീക്കാൻ, "0, -50%" മൂല്യമുള്ള വിവർത്തന പ്രോപ്പർട്ടി ഉപയോഗിക്കുക. മറ്റ് തരത്തിലുള്ള പൊസിഷനിംഗിന് ലഭ്യമല്ലാത്ത പ്രോപ്പർട്ടികൾ അവയിൽ പ്രയോഗിക്കുന്നതിനാൽ, തികച്ചും സ്ഥാനമുള്ള മൂലകങ്ങളെ ഒരു പുതിയ തരമായി വേർതിരിച്ചറിയാൻ കഴിയും.

ബ്രൗസറിൻ്റെ മുകളിൽ ഇടത് കോണുമായി ബന്ധപ്പെട്ട സ്ഥാനം
ഇടത്, മുകളിൽ, വലത്, താഴെ പ്രോപ്പർട്ടികൾ തികച്ചും താരതമ്യേന സ്ഥാനമുള്ള മൂലകങ്ങളിൽ വ്യത്യസ്തമായി പ്രവർത്തിക്കുന്നു. ആപേക്ഷിക ഘടകങ്ങൾക്ക്, ഈ പ്രോപ്പർട്ടികൾ മൂലകം സ്ഥിതിചെയ്യുന്ന സ്ഥലവുമായി ബന്ധപ്പെട്ട ഓഫ്സെറ്റ് സജ്ജമാക്കുന്നു. ബ്രൗസർ വിൻഡോയുടെ വലുപ്പവുമായി ബന്ധിപ്പിച്ചിരിക്കുന്ന ഒരു നിർദ്ദിഷ്ട കോർഡിനേറ്റ് സിസ്റ്റവുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ തികച്ചും സ്ഥാനമുള്ളവ ഒരു സ്ഥാനം പിടിക്കുന്നു. ഈ സിസ്റ്റത്തിൻ്റെ ആരംഭ പോയിൻ്റുകൾ വിൻഡോയുടെ കോണുകളാണ്. ഇടത് പ്രോപ്പർട്ടി ഉപയോഗിക്കുമ്പോൾ, ബ്രൗസറിൻ്റെ ഇടതുവശത്ത് നിന്ന് ഇൻഡൻ്റ് കണക്കാക്കും, എന്നാൽ സ്ക്രോൾബാർ ഉണ്ടാകില്ല. ടോപ്പ് പ്രോപ്പർട്ടി, പൂർണ്ണമായും സ്ഥാനം പിടിക്കുമ്പോൾ, ബ്രൗസറിൻ്റെ മുകളിൽ നിന്ന് അത് പ്രയോഗിക്കുന്ന ഘടകത്തിൻ്റെ മുകളിലേക്ക് ഓഫ്സെറ്റ് വ്യക്തമാക്കുന്നു. രണ്ട് ഗുണങ്ങളും സംയോജിപ്പിക്കുന്നതിലൂടെ, ബ്രൗസറിൻ്റെ മുകളിൽ ഇടത് കോണിലേക്ക് ആപേക്ഷികമായി ഘടകം നീക്കാൻ കഴിയും.

ബ്രൗസറിൻ്റെ മുകളിൽ വലത് കോണുമായി ബന്ധപ്പെട്ട സ്ഥാനം
അതുപോലെ, വലത്, മുകളിലെ പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ച്, നിങ്ങൾക്ക് ബ്രൗസർ വിൻഡോയുടെ വലതുവശത്ത് ഒരു ഘടകം അമർത്തി അതിൻ്റെ ലംബ സ്ഥാനം മാറ്റാം, അത് മുകളിൽ വലത് കോണിലേക്ക് നീക്കുക. ശരിയായ പ്രോപ്പർട്ടി നെഗറ്റീവ് മൂല്യത്തിലേക്ക് സജ്ജീകരിച്ചിട്ടുണ്ടെങ്കിൽ, ബ്ലോക്ക് വിൻഡോ ബോർഡറിന് പുറത്ത് നീങ്ങും. ഇതിനുശേഷം, ഒരു സ്ക്രോൾ ബാർ പ്രത്യക്ഷപ്പെടണം. ഒരു ഘടകം താഴേക്ക് നീക്കാൻ, താഴെയുള്ള പ്രോപ്പർട്ടി ഉപയോഗിക്കുക. ഇത് ബ്രൗസർ വിൻഡോയുടെ താഴത്തെ അറ്റത്ത് നിന്ന് ബ്ലോക്കിൻ്റെ അടിയിലേക്ക് ഇൻഡൻ്റ് വ്യക്തമാക്കുന്നു. അതിൻ്റെ മൂല്യം നെഗറ്റീവ് ആണെങ്കിൽ, ഒരു സ്ക്രോൾ ബാറും ദൃശ്യമാകും, കാരണം ബ്രൗസർ വിൻഡോയുടെ താഴത്തെ ബോർഡറിന് അപ്പുറത്തേക്ക് ഘടകം നീക്കുന്നു.
കേവല സ്ഥാനനിർണ്ണയത്തിനുള്ള കോർഡിനേറ്റ് സിസ്റ്റം
സ്ഥിരസ്ഥിതിയായി, സമ്പൂർണ്ണ സ്ഥാനനിർണ്ണയം നൽകിയിട്ടുള്ള എല്ലാ ഘടകങ്ങളും ഒരു കോർഡിനേറ്റ് സിസ്റ്റവുമായി ബന്ധിപ്പിച്ചിരിക്കുന്നു - ബ്രൗസർ വിൻഡോ. എന്നാൽ ചില പാരൻ്റ് എലമെൻ്റ് റിലേറ്റീവ് പൊസിഷനിംഗ് നൽകി ഇത് മാറ്റാവുന്നതാണ്. അപ്പോൾ രക്ഷിതാവിനെ ആശ്രയിച്ച് ചൈൽഡ് ബ്ലോക്ക് അതിൻ്റെ സ്ഥാനം മാറ്റും. പാരൻ്റ് ഘടകങ്ങളിൽ ആപേക്ഷിക സ്ഥാനനിർണ്ണയമുള്ള നിരവധി ഉണ്ടെങ്കിൽ, അവയിൽ ഏറ്റവും അടുത്തുള്ളതിൽ നിന്നാണ് എണ്ണൽ നടത്തുന്നത്. ഈ സാഹചര്യത്തിൽ, ബോഡി ടാഗിൽ വ്യക്തമാക്കിയിട്ടുള്ളതിൽ നിന്നായിരിക്കും ഡിഫോൾട്ട് പൊസിഷനിംഗ്.

തികച്ചും സ്ഥാനമുള്ള ഘടകത്തിനായുള്ള റഫറൻസ് പോയിൻ്റ്
ഒരു മൂലകത്തിന് കേവല സ്ഥാനനിർണ്ണയം നൽകുന്നതിന് മുമ്പ്, അതിനെ ചില സ്ഥലങ്ങളിൽ ഒരു അവ്യക്തമായ ഉത്ഭവം എന്ന് വിളിച്ചിരുന്നു. അത്തരമൊരു ബ്ലോക്കിന് പ്രോപ്പർട്ടികൾ നൽകിയില്ലെങ്കിൽ, അത് നീങ്ങുകയില്ല. മാർജിൻ പ്രോപ്പർട്ടി സജ്ജീകരിച്ച് നിങ്ങൾക്ക് ഇത് മാറ്റാവുന്നതാണ്. ഇത് പൊസിഷനിംഗ് പ്രോപ്പർട്ടികൾ പോലെ തന്നെ പ്രവർത്തിക്കും. നിങ്ങൾ ഇടത് പ്രോപ്പർട്ടിയുടെയും മറ്റുള്ളവയുടെയും മൂല്യം നിർവചിച്ചില്ലെങ്കിൽ, അത് ഓട്ടോയ്ക്ക് തുല്യമായിരിക്കും. മൂലകങ്ങളെ അവയുടെ യഥാർത്ഥ സ്ഥലങ്ങളിലേക്ക് തിരികെ കൊണ്ടുവരാൻ നിങ്ങൾക്ക് സ്വയമേവ ഉപയോഗിക്കാവുന്നതാണ്.

നിശ്ചിത സ്ഥാനനിർണ്ണയം
മറ്റൊരു അർത്ഥം നിശ്ചയിച്ചിരിക്കുന്നു. പൊസിഷൻ പ്രോപ്പർട്ടി ഒരു ഘടകത്തെ ഒരു പ്രത്യേക സ്ഥലത്ത് നങ്കൂരമിടുന്നു. CSS-ൽ മെനുകൾ സൃഷ്ടിക്കാൻ ഫിക്സഡ് പൊസിഷനിംഗ് ഉപയോഗിക്കാറുണ്ട്. ഇത് സമ്പൂർണ്ണതയ്ക്ക് സമാനമാണ്, എന്നാൽ നിശ്ചിത ബ്ലോക്ക് ഒഴുക്കിൽ നിന്ന് വീഴുന്നു. പേജ് സ്ക്രോൾ ചെയ്യുമ്പോൾ പോലും, അത്തരമൊരു ഘടകം നിലനിൽക്കും, അതിനാൽ CSS-ൽ ഒരു മെനു സൃഷ്ടിക്കാൻ ഇത് ഉപയോഗിക്കുന്നത് സൗകര്യപ്രദമാണ്. ആരംഭ പോയിൻ്റ് ബ്രൗസർ വിൻഡോയുമായി ബന്ധിപ്പിച്ചിരിക്കും. സ്ഥാനമുള്ള നിരവധി ബ്ലോക്കുകൾ ഉണ്ടെങ്കിൽ, അവ ഓർഡർ ചെയ്യാൻ z-ഇൻഡക്സ് പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നു. അതിൻ്റെ സഹായത്തോടെ, ഒരു പൂർണ്ണസംഖ്യയായി പ്രകടിപ്പിക്കുന്ന അനുബന്ധ സൂചിക നൽകിയാൽ നിങ്ങൾക്ക് ആപേക്ഷിക ബ്ലോക്കുകളെ കേവലമായവയുമായി ഓവർലാപ്പ് ചെയ്യാൻ കഴിയും. അത് വലുതാണ്, ബ്ലോക്ക് ഉയർന്നതായിരിക്കും.
ഈ ദിവസങ്ങളിൽ, വെബ് ഡെവലപ്പർമാർക്ക് വിവിധ CSS ടെക്നിക്കുകൾ ഉപയോഗിച്ച് സങ്കീർണ്ണമായ വെബ് പേജ് ലേഔട്ടുകൾ നിർമ്മിക്കാൻ കഴിയും. ഈ സാങ്കേതിക വിദ്യകളിൽ ചിലതിന് ഒരു നീണ്ട ചരിത്രമുണ്ട് (ഫ്ലോട്ടുകൾ), മറ്റുള്ളവ (ഫ്ലെക്സ്ബോക്സ്) സമീപ വർഷങ്ങളിൽ ജനപ്രീതി നേടിയിട്ടുണ്ട്.
ഈ ലേഖനത്തിൽ, CSS സ്ഥാനനിർണ്ണയത്തെക്കുറിച്ചുള്ള കുറച്ച് അറിയപ്പെടാത്ത കാര്യങ്ങൾ ഞങ്ങൾ സൂക്ഷ്മമായി പരിശോധിക്കും.
ആരംഭിക്കുന്നതിന് മുമ്പ്, വ്യത്യസ്ത തരം പൊസിഷനിംഗിൻ്റെ അടിസ്ഥാനകാര്യങ്ങൾ നമുക്ക് ഹ്രസ്വമായി അവലോകനം ചെയ്യാം.
ലഭ്യമായ പൊസിഷനിംഗ് രീതികളുടെ അവലോകനം
CSS പൊസിഷൻ പ്രോപ്പർട്ടി ഒരു മൂലകത്തിൻ്റെ പൊസിഷനിംഗ് തരം നിർണ്ണയിക്കുന്നു.
പൊസിഷനിംഗ് ഓപ്ഷനുകൾ
സ്റ്റാറ്റിക് എന്നത് ഡിഫോൾട്ട് പൊസിഷനിംഗ് പ്രോപ്പർട്ടി മൂല്യമാണ്. ഈ ഘടകം പൊസിഷനിംഗ് ഉപയോഗിക്കുന്നില്ലെന്ന് ഞങ്ങൾ ഉപദേശിക്കുന്നു - ഡിഫോൾട്ടല്ലാത്ത ഒരു പൊസിഷനിംഗ് തരം നിങ്ങൾ വ്യക്തമാക്കിയാൽ മാത്രമേ പൊസിഷനിംഗ് ബാധകമാകൂ.
ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾ ഇനിപ്പറയുന്ന മൂല്യങ്ങളിൽ ഒന്നിലേക്ക് പൊസിഷൻ പ്രോപ്പർട്ടി സജ്ജീകരിക്കേണ്ടതുണ്ട്:
• ബന്ധു
• കേവല
• നിശ്ചയിച്ചു
• ഒട്ടിപ്പിടിക്കുന്ന
പൊസിഷനിംഗ് സജ്ജീകരിച്ചതിനുശേഷം മാത്രമേ, മൂലകത്തെ ഓഫ്സെറ്റ് ചെയ്യുന്ന പ്രോപ്പർട്ടികൾ നിങ്ങൾക്ക് ഉപയോഗിക്കാൻ കഴിയൂ:
• ശരിയാണ്
• താഴെ
• ഈ ഗുണങ്ങളുടെ പ്രാരംഭ മൂല്യം ഓട്ടോ കീവേഡ് ആണ്.
ഒരു മൂലകത്തിന് അതിൻ്റെ പൊസിഷൻ പ്രോപ്പർട്ടി കേവലമോ സ്ഥിരമോ ആയി സജ്ജീകരിച്ചിട്ടുണ്ടെങ്കിൽ, അത് തികച്ചും സ്ഥാനമുള്ള ഘടകമാണെന്ന് കണക്കിലെടുക്കണം. കൂടാതെ, z-ഇൻഡക്സ് പ്രോപ്പർട്ടി പൊസിഷൻ ചെയ്ത ഘടകങ്ങൾക്കായി പ്രവർത്തിക്കാൻ തുടങ്ങുന്നു, ഇത് സ്റ്റാക്കിംഗ് ഓർഡർ നിർണ്ണയിക്കുന്നു.
പ്രധാന സ്ഥാനനിർണ്ണയ രീതികൾ തമ്മിലുള്ള വ്യത്യാസങ്ങൾ
ഇപ്പോൾ ലഭ്യമായ പൊസിഷനിംഗ് തരങ്ങൾ തമ്മിലുള്ള മൂന്ന് അടിസ്ഥാന വ്യത്യാസങ്ങൾ നമുക്ക് പെട്ടെന്ന് നോക്കാം:
• തികച്ചും (സമ്പൂർണ) സ്ഥാനമുള്ള ഘടകങ്ങൾ സ്ട്രീമിൽ നിന്ന് പൂർണ്ണമായും നീക്കംചെയ്യുന്നു, അവയുടെ സ്ഥാനം അവരുടെ അടുത്തുള്ള അയൽക്കാർ ഏറ്റെടുക്കുന്നു.
• താരതമ്യേന സ്ഥാനമുള്ളതും (ആപേക്ഷികം) ഒട്ടിച്ചതും (ഒട്ടിപ്പിടിക്കുന്നവയും) ഒഴുക്കിൽ അവരുടെ സ്ഥാനം നിലനിർത്തുന്നു, അവരുടെ അടുത്തുള്ള അയൽക്കാർ അത് കൈവശപ്പെടുത്തുന്നില്ല. എന്നിരുന്നാലും, ഈ മൂലകങ്ങളുടെ പാഡിംഗ് സ്ഥലം എടുക്കുന്നില്ല, എന്നാൽ മറ്റ് ഘടകങ്ങൾ പൂർണ്ണമായും അവഗണിക്കുകയും ഇത് ഘടകങ്ങൾ ഓവർലാപ്പുചെയ്യുന്നതിന് കാരണമായേക്കാം.
• സ്ഥിര മൂലകങ്ങൾ (ഒപ്പം നിശ്ചിത സ്ഥാനനിർണ്ണയം ഒരു തരം സമ്പൂർണ്ണമാണ്) എല്ലായ്പ്പോഴും ദൃശ്യപരത മേഖലയുമായി (പൂർവ്വികരുടെ സ്ഥാനനിർണ്ണയത്തിൻ്റെ സാന്നിധ്യം അവഗണിച്ച്) ആപേക്ഷികമായി സ്ഥാനം പിടിക്കുന്നു, അതേസമയം സ്‌ക്രോളിംഗ് (ഓവർഫ്ലോ: ഓട്ടോ) ഉപയോഗിച്ച് സ്റ്റിക്കി മൂലകങ്ങൾ അടുത്തുള്ള പൂർവ്വികനെ അപേക്ഷിച്ച് സ്ഥാനം പിടിക്കുന്നു. അത്തരം പൂർവ്വികരുടെ അഭാവത്തിൽ മാത്രമേ അവർ ദൃശ്യപരത മേഖലയുമായി താരതമ്യപ്പെടുത്താവൂ.
ഡെമോയിൽ നിങ്ങൾക്ക് ഇത് കൂടുതൽ വിശദമായി കാണാൻ കഴിയും:
ശ്രദ്ധിക്കുക: സ്റ്റിക്കി എലമെൻ്റ് പൊസിഷനിംഗ് ഇപ്പോഴും ബ്രൗസറുകളിൽ പരിമിതമായ പിന്തുണയുള്ള ഒരു പരീക്ഷണാത്മക സാങ്കേതികവിദ്യയാണ്. തീർച്ചയായും, നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, ബ്രൗസറിലേക്ക് ഈ പ്രവർത്തനം ചേർക്കുന്നതിന് നിങ്ങൾക്ക് ഒരു പോളിഫിൽ ഉപയോഗിക്കാം, എന്നാൽ അതിൻ്റെ കുറഞ്ഞ വ്യാപനം കണക്കിലെടുക്കുമ്പോൾ, ഈ പ്രോപ്പർട്ടി ലേഖനത്തിൽ ചർച്ച ചെയ്യില്ല.
കേവല പൊസിഷനിംഗ് തരത്തോടുകൂടിയ പൊസിഷനിംഗ് ഘടകങ്ങൾ
സമ്പൂർണ്ണ സ്ഥാനനിർണ്ണയം എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് മിക്ക ആളുകൾക്കും അറിയാമെന്ന് എനിക്ക് ഉറപ്പുണ്ട്. എന്നിരുന്നാലും, അതിനെക്കുറിച്ചുള്ള പല കാര്യങ്ങളും തുടക്കക്കാരെ ആശയക്കുഴപ്പത്തിലാക്കിയേക്കാം.
അതിനാൽ, സ്ഥാനനിർണ്ണയത്തിൻ്റെ കുറച്ച് അറിയപ്പെടുന്ന സവിശേഷതകൾ വിവരിക്കുമ്പോൾ അത് ആരംഭിക്കാൻ ഞാൻ തീരുമാനിച്ചു.
അതിനാൽ, തികച്ചും സ്ഥാനമുള്ള ഒരു മൂലകം അതിൻ്റെ ഏറ്റവും അടുത്ത സ്ഥാനമുള്ള പൂർവ്വികനെ അപേക്ഷിച്ച് ഓഫ്സെറ്റ് ചെയ്യുന്നു. തീർച്ചയായും, ഏതെങ്കിലും പൂർവ്വികർക്ക് സ്റ്റാറ്റിക് അല്ലാതെ മറ്റൊരു സ്ഥാനമുണ്ടെങ്കിൽ ഇത് പ്രവർത്തിക്കും - മൂലകത്തിന് സ്ഥാനമുള്ള പൂർവ്വികർ ഇല്ലെങ്കിൽ, അത് ദൃശ്യപരത മേഖലയുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ഓഫ്സെറ്റ് ചെയ്യുന്നു.
ഇനിപ്പറയുന്ന ഉദാഹരണത്തിലൂടെ ഇത് തെളിയിക്കുന്നു:
ഈ ഡെമോയിൽ, ഗ്രീൻ ബ്ലോക്ക് ആദ്യം പൂർണ്ണമായും പൂജ്യം പാഡിംഗ് അടിയിൽ: 0 ഉം ഇടത്: 0 ഉം ആണ് സ്ഥാപിച്ചിരിക്കുന്നത്, അതിൻ്റെ പൂർവ്വികൻ (ചുവന്ന ബ്ലോക്ക്) സ്ഥിതി ചെയ്യുന്നില്ല.
എന്നിരുന്നാലും, ഞങ്ങൾ ബാഹ്യ റാപ്പർ (ക്ലാസ് ജംബോട്രോണുള്ള ഒരു ഘടകം) താരതമ്യേന സ്ഥാനം പിടിച്ചിട്ടുണ്ട്. പൂർവ്വികരുടെ പൊസിഷനിംഗ് തരം മാറുമ്പോൾ ഗ്രീൻ ബ്ലോക്കിൻ്റെ സ്ഥാനം മാറുന്നത് എങ്ങനെയെന്ന് ശ്രദ്ധിക്കുക.
തികച്ചും സ്ഥാനമുള്ള ഘടകങ്ങൾ ഫ്ലോട്ട് പ്രോപ്പർട്ടി അവഗണിക്കുന്നു
ഞങ്ങൾ ഒരു ഫ്ലോട്ടഡ് എലമെൻ്റിന് കേവലമോ സ്ഥിരമോ ആയ പൊസിഷനിംഗ് പ്രയോഗിച്ചാൽ, ഫ്ലോട്ട് പ്രോപ്പർട്ടി ഒന്നും അല്ല എന്ന് സജ്ജീകരിക്കും. മറുവശത്ത്, ഞങ്ങൾ ആപേക്ഷിക സ്ഥാനനിർണ്ണയം സജ്ജീകരിക്കുകയാണെങ്കിൽ, ഘടകം ഫ്ലോട്ടിംഗ് ആയി തുടരും.
അനുബന്ധ ഡെമോ നോക്കുക:
ഈ ഉദാഹരണത്തിൽ, വലതുവശത്തേക്ക് ഒഴുകുന്ന രണ്ട് വ്യത്യസ്ത ഘടകങ്ങൾ ഞങ്ങൾ നിർവ്വചിക്കുന്നു. ഒരു ചുവന്ന ബ്ലോക്ക് പൂർണ്ണമായും സ്ഥാനം പിടിക്കുമ്പോൾ, അത് ഫ്ലോട്ട് പ്രോപ്പർട്ടിയുടെ മൂല്യത്തെ അവഗണിക്കുന്നു, അതേസമയം താരതമ്യേന സ്ഥാനമുള്ള പച്ച ബ്ലോക്ക് ഫ്ലോട്ട് മൂല്യം നിലനിർത്തുന്നു.
തികച്ചും സ്ഥാനമുള്ള ഇൻലൈൻ ഘടകങ്ങൾ ബ്ലോക്ക് ഘടകങ്ങളായി മാറുന്നു
സമ്പൂർണ്ണമോ സ്ഥിരമോ ആയ പൊസിഷനിംഗ് ഉള്ള ഒരു ഇൻലൈൻ ഘടകം ഒരു ബ്ലോക്ക് മൂലകത്തിൻ്റെ ഗുണങ്ങൾ എടുക്കുന്നു. ഇൻലൈൻ ഘടകങ്ങളെ ബ്ലോക്ക് ഘടകങ്ങളിലേക്ക് പരിവർത്തനം ചെയ്യുന്നത് പട്ടികയിൽ കൂടുതൽ വിശദമായി വിവരിച്ചിരിക്കുന്നു.
ഈ സാഹചര്യത്തിൽ, ഞങ്ങൾ രണ്ട് വ്യത്യസ്ത ഘടകങ്ങൾ സൃഷ്ടിച്ചു. ആദ്യത്തേത് (പച്ച ബ്ലോക്ക്) ഒരു ബ്ലോക്ക് മൂലകമാണ്, രണ്ടാമത്തേത് (റെഡ് ബ്ലോക്ക്) ഒരു ഇൻലൈൻ മൂലകമാണ്. തുടക്കത്തിൽ, പച്ച ബ്ലോക്ക് മാത്രമേ ദൃശ്യമാകൂ.
റെഡ് ബോക്‌സ് ദൃശ്യമാകില്ല, കാരണം അതിൻ്റെ വീതിയും ഉയരവും ബ്ലോക്ക്, ഇൻലൈൻ-ബ്ലോക്ക് ഘടകങ്ങളുമായി മാത്രമേ പ്രവർത്തിക്കൂ, കൂടാതെ ഉള്ളടക്കം ഇല്ലാത്തതിനാൽ അതിന് അളവുകളൊന്നുമില്ല.
നിങ്ങൾ ഒരു ചുവന്ന ബ്ലോക്കിന് ഒരു സമ്പൂർണ്ണ അല്ലെങ്കിൽ നിശ്ചിത സ്ഥാനം നൽകുമ്പോൾ, അത് ഒരു ബ്ലോക്ക് ബ്ലോക്കായി മാറുകയും അതിൽ വ്യക്തമാക്കിയിരിക്കുന്ന ബ്ലോക്ക് വലുപ്പങ്ങൾ പ്രാബല്യത്തിൽ വരികയും ചെയ്യും.
തികച്ചും സ്ഥാനമുള്ള ഘടകങ്ങൾക്ക് പാഡിംഗ് തകർച്ചയില്ല
സ്ഥിരസ്ഥിതിയായി, രണ്ട് ലംബ മാർജിനുകൾ സ്പർശിക്കുമ്പോൾ, അവ അവയുടെ പരമാവധി തുല്യമായ ഒന്നായി സംയോജിപ്പിക്കുന്നു. ഇതിനെ മാർജിൻ തകർച്ച എന്ന് വിളിക്കുന്നു.
ഇവിടെ തികച്ചും സ്ഥാനമുള്ള മൂലകങ്ങളുടെ സ്വഭാവം ഫ്ലോട്ടിംഗ് മൂലകങ്ങൾക്ക് സമാനമാണ് - അവയുടെ പാഡിംഗ് അതിൻ്റെ അയൽക്കാരുമായി സംയോജിപ്പിച്ചിട്ടില്ല.
ഈ ഡെമോയിൽ, മൂലകത്തിന് 20 പിക്സലുകളുടെ പാഡിംഗ് നൽകിയിരിക്കുന്നു. പാരൻ്റ് എലമെൻ്റിൻ്റെ പാഡിംഗിനൊപ്പം അതിൻ്റെ പാഡിംഗ് തകരുന്നു, അതും 20 പിക്സലുകൾ. നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, കേവല സ്ഥാനനിർണ്ണയത്തിൽ മാത്രം തകർച്ചയില്ല.
എന്നാൽ അരികുകൾ തകരുന്നത് എങ്ങനെ തടയാം? അവയ്ക്കിടയിൽ ഒരുതരം സെപ്പറേറ്റർ സ്ഥാപിക്കേണ്ടതുണ്ട്.
ഇത് പാഡിംഗോ ബോർഡറോ ആകാം, മാതാപിതാക്കളുടെയും കുട്ടികളുടെയും ഘടകങ്ങളിൽ ഇത് പ്രയോഗിക്കാവുന്നതാണ്. പാരൻ്റ് എലമെൻ്റിലേക്ക് ഒരു ക്ലിയർഫിക്സ് ചേർക്കുക എന്നതാണ് മറ്റൊരു ഓപ്ഷൻ.
പിക്സലുകളും ശതമാനവും ഉള്ള മൂലകങ്ങളുടെ സ്ഥാനനിർണ്ണയം
മൂലകങ്ങളുടെ സ്ഥാനം നിലനിർത്താൻ നിങ്ങൾ എപ്പോഴെങ്കിലും പിക്സലുകൾക്ക് പകരം ശതമാനം ഉപയോഗിച്ചിട്ടുണ്ടോ? ഉത്തരം അതെ എന്നാണെങ്കിൽ, ഒരു മൂലകത്തിൻ്റെ ഓഫ്‌സെറ്റ് തിരഞ്ഞെടുത്ത യൂണിറ്റുകളെ (പിക്സലുകൾ അല്ലെങ്കിൽ ശതമാനം) ആശ്രയിച്ചിരിക്കുന്നുവെന്ന് നിങ്ങൾക്കറിയാം.
ഇത് കുറച്ച് ആശയക്കുഴപ്പമുണ്ടാക്കുന്നു, അല്ലേ? അതിനാൽ ആദ്യം ശതമാനം ഓഫ്‌സെറ്റിനെക്കുറിച്ച് സ്പെസിഫിക്കേഷൻ എന്താണ് പറയുന്നതെന്ന് നോക്കാം:
പാരൻ്റ് ബ്ലോക്കിൻ്റെ വീതിയുടെ (ഇടത്തോട്ടും വലത്തോട്ടും) അല്ലെങ്കിൽ ഉയരത്തിൻ്റെ (മുകളിലോ താഴെയോ) ശതമാനമായി ഓഫ്‌സെറ്റ് ചെയ്യുക. ഒട്ടിച്ച മൂലകങ്ങൾക്ക്, ഓഫ്സെറ്റ് ഫ്ലോയുടെ വീതിയുടെ (ഇടത്തോട്ടും വലത്തോട്ടും) അല്ലെങ്കിൽ ഉയരം (മുകളിലോ താഴെയോ) ശതമാനമായി കണക്കാക്കുന്നു. നെഗറ്റീവ് മൂല്യങ്ങൾ സ്വീകാര്യമാണ്.
സൂചിപ്പിച്ചതുപോലെ, നിങ്ങൾ ഓഫ്‌സെറ്റ് ഒരു ശതമാനമായി സജ്ജീകരിക്കുമ്പോൾ, മൂലകത്തിൻ്റെ സ്ഥാനം അതിൻ്റെ മാതാപിതാക്കളുടെ വീതിയെയും ഉയരത്തെയും ആശ്രയിച്ചിരിക്കുന്നു.
ഡെമോ ഈ വ്യത്യാസം കാണിക്കുന്നു:
ഈ ഉദാഹരണം ഓഫ്‌സെറ്റിനായി പിക്സലുകളും ശതമാനങ്ങളും ഉപയോഗിക്കുന്നു. തീർച്ചയായും, നിങ്ങൾ പിക്സലുകളിൽ ഒരു ഓഫ്സെറ്റ് വ്യക്തമാക്കുമ്പോൾ, മൂലകം ആവശ്യമുള്ളിടത്തേക്ക് നീക്കും.
ഞങ്ങൾ ഓഫ്‌സെറ്റിനായി ഒരു ശതമാനം തിരഞ്ഞെടുക്കുകയാണെങ്കിൽ, ഫലം പാരൻ്റ് എലമെൻ്റിൻ്റെ വലുപ്പത്തെ ആശ്രയിച്ചിരിക്കും. പുതിയ സ്ഥാനം എങ്ങനെ കണക്കാക്കുന്നുവെന്ന് കാണിക്കുന്ന ഒരു ദൃശ്യവൽക്കരണം ഇതാ:
കുറിപ്പ്: നിങ്ങൾക്കറിയാവുന്നതുപോലെ, പരിവർത്തന പ്രോപ്പർട്ടി (വിവിധ വിവർത്തന പ്രവർത്തനങ്ങൾക്കൊപ്പം) ഒരു ഘടകത്തിൻ്റെ സ്ഥാനം മാറ്റാൻ നിങ്ങളെ അനുവദിക്കുന്നു. എന്നാൽ ഈ സാഹചര്യത്തിൽ, ശതമാനം ഉപയോഗിക്കുമ്പോൾ, കണക്കുകൂട്ടൽ മൂലകത്തിൻ്റെ വലുപ്പത്തെ അടിസ്ഥാനമാക്കിയുള്ളതായിരിക്കും, അല്ലാതെ അതിൻ്റെ പാരൻ്റ് അല്ല.
ഉപസംഹാരം
CSS-ലെ പൊസിഷനിംഗ് നന്നായി മനസ്സിലാക്കാനും ചില വെല്ലുവിളികൾ വ്യക്തമാക്കാനും ഈ ലേഖനം നിങ്ങളെ സഹായിച്ചിട്ടുണ്ടെന്ന് ഞാൻ പ്രതീക്ഷിക്കുന്നു.
ഒരു ബ്ലോക്ക് ബന്ധുവിനെ സ്ഥാപിക്കുമ്പോൾ, നിങ്ങൾ പ്രോപ്പർട്ടി സജ്ജീകരിക്കേണ്ടതുണ്ട് സ്ഥാനം:ബന്ധുസ്ഥാനചലന ഗുണങ്ങളും. ഈ കേസിൽ സ്ഥാനചലനം സംഭവിക്കുന്നത് "പാരൻ്റ്" മൂലകവുമായി (സമ്പൂർണ സ്ഥാനനിർണ്ണയം പോലെ) ആപേക്ഷികമല്ല, മറിച്ച് സാധാരണ ഒഴുക്കിലെ ബ്ലോക്കുമായി ബന്ധപ്പെട്ടതാണ്. ഒരു ഉദാഹരണത്തിലൂടെ ഇത് കൂടുതൽ വ്യക്തമാകും. നമുക്ക് മൂന്ന് ഡിവികളുള്ള ഒരു HTML പേജ് ഉണ്ടെന്ന് പറയാം:
ആപേക്ഷിക സ്ഥാനനിർണ്ണയം
സ്റ്റൈൽ ഷീറ്റിൽ ഈ ബ്ലോക്കുകളുടെ വലുപ്പങ്ങളും അതിരുകളും സജ്ജമാക്കാം:
#blok1, #blok2, #blok3 (ബോർഡർ:1px ഖര ചുവപ്പ്; വീതി:150px; ഉയരം:50px; )
ഇപ്പോൾ ബ്രൗസറിലെ ഞങ്ങളുടെ പേജ് ഇതുപോലെ കാണപ്പെടുന്നു:
ഇപ്പോൾ സ്റ്റൈൽ പേജിലേക്ക് ഒരു നിയമം ചേർത്ത് രണ്ടാമത്തെ ബ്ലോക്കിൻ്റെ സ്ഥാനം മാറ്റാം:
#blok1, #blok2, #blok3 (ബോർഡർ:1px ഖര ചുവപ്പ്; വീതി:150px; ഉയരം:50px; ) #blok2(സ്ഥാനം:ബന്ധു; ഇടത്:50px; മുകളിൽ:25px; )
ഇപ്പോൾ ഞങ്ങളുടെ പേജ് ഇതുപോലെ കാണപ്പെടുന്നു:

ഞങ്ങളുടെ രണ്ടാമത്തെ ബ്ലോക്ക് സാധാരണ ഒഴുക്കിൽ ആയിരിക്കുമായിരുന്ന സ്ഥലത്തെ അപേക്ഷിച്ച് താഴേക്കും വലത്തോട്ടും നീങ്ങി. ശേഷിക്കുന്ന ബ്ലോക്കുകൾ അവരുടെ സ്ഥലങ്ങളിൽ തുടർന്നു. പ്രായോഗികമായി, ആപേക്ഷിക സ്ഥാനനിർണ്ണയം വളരെ അപൂർവമായി മാത്രമേ ഉപയോഗിക്കുന്നുള്ളൂ, അതിനാൽ ഞങ്ങൾ അതിൽ കൂടുതൽ ശ്രദ്ധ ചെലുത്തുകയില്ല കൂടാതെ ഫ്ലോട്ടിംഗ് ബ്ലോക്കുകൾ പരിഗണിക്കുകയും ചെയ്യും.
ഫ്ലോട്ടിംഗ് ബ്ലോക്കുകൾ
മുമ്പത്തെ സ്കീമുകളിലേതുപോലെ ഈ ബ്ലോക്കുകൾ പിക്സൽ കൃത്യതയോടെ സ്ഥാപിക്കാൻ കഴിയില്ല, എന്നാൽ ഈ പൊസിഷനിംഗ് സ്കീം വളരെ സാധാരണമാണ്. ഫ്ലോട്ടിംഗ് ബ്ലോക്കുകൾ ഇല്ലാതെ അപൂർവ്വമായി ഒരു വെബ്സൈറ്റ് നിലനിൽക്കുന്നു, കൂടാതെ അവയില്ലാതെ ഒരു "ഫ്ലൂയിഡ്" വെബ്സൈറ്റ് ലേഔട്ട് ഉണ്ടാക്കുന്നത് പൂർണ്ണമായും അസാധ്യമാണ്.
അത്തരം ബ്ലോക്കുകൾക്ക് HTML-ലെ ചിത്രങ്ങൾ സമാനമായ രീതിയിൽ പ്രവർത്തിക്കുന്നു, പരാമീറ്റർ ഉപയോഗിച്ച് വിന്യസിച്ചിരിക്കുന്നു വിന്യസിക്കുക.
ഫ്ലോട്ടിംഗ് ബ്ലോക്കുകൾ പ്രോപ്പർട്ടി നിർവചിച്ചിരിക്കുന്നു ഫ്ലോട്ട്, ബ്ലോക്ക് ഫ്ലോട്ടിംഗ് ആണോ എന്നും ഏത് ദിശയിലേക്കാണ് നീങ്ങേണ്ടതെന്നും ഇത് നിർണ്ണയിക്കുന്നു. മൂന്ന് ഓപ്ഷനുകൾ ഉണ്ട്:
• വിട്ടുപോയി- ബ്ലോക്ക് ഇടത് അരികിലേക്ക് അമർത്തി, ശേഷിക്കുന്ന ഘടകങ്ങൾ വലതുവശത്ത് ചുറ്റും ഒഴുകുന്നു.


• ശരിയാണ്- ബ്ലോക്ക് വലത് അരികിലേക്ക് അമർത്തി, ശേഷിക്കുന്ന ഘടകങ്ങൾ ഇടത് വശത്ത് ചുറ്റും ഒഴുകുന്നു.


• ഒന്നുമില്ല- ബ്ലോക്ക് നീങ്ങുന്നില്ല, പ്രോപ്പർട്ടി അനുസരിച്ച് സ്ഥാനം പിടിച്ചിരിക്കുന്നു സ്ഥാനം.
നമുക്ക് ഒരു ഉദാഹരണം നോക്കാം. ഇനിപ്പറയുന്ന കോഡുള്ള ഒരു HTML പേജ് ഞങ്ങളുടെ പക്കലുണ്ടെന്ന് പറയാം:
ബ്ലോക്ക് പൊസിഷനിംഗ്
ഒരു വാചകം തടയുക
ഇനിപ്പറയുന്ന കോഡുള്ള ഒരു style.css പേജും:
#blok1(ബോർഡർ:1px ഖര ചുവപ്പ്; വീതി:150px; ഉയരം:50px; )
ഇപ്പോൾ ബ്രൗസറിലെ ഞങ്ങളുടെ പേജ് ഇതുപോലെ കാണപ്പെടുന്നു:
നമുക്ക് നമ്മുടെ ബ്ലോക്ക് ഫ്ലോട്ട് ചെയ്ത് ഇടത് അരികിലേക്ക് തള്ളാം:
#blok1(ബോർഡർ:1px ഖര ചുവപ്പ്; വീതി:150px; ഉയരം:50px; ഫ്ലോട്ട്:ഇടത്; )
ഇപ്പോൾ നമുക്ക് ബ്ലോക്ക് വലത് അരികിലേക്ക് തള്ളാം:
#blok1(ബോർഡർ:1px ഖര ചുവപ്പ്; വീതി:150px; ഉയരം:50px; ഫ്ലോട്ട്:വലത്; )
ഇപ്പോൾ ബ്രൗസറിലെ ഞങ്ങളുടെ പേജ് ഇതുപോലെ കാണപ്പെടുന്നു:
പേജിൽ നിരവധി ഫ്ലോട്ടിംഗ് ബ്ലോക്കുകൾ ഉണ്ടെങ്കിൽ എന്ത് സംഭവിക്കും? നമ്മുടെ html പേജിലേക്ക് മറ്റൊരു ബ്ലോക്ക് ചേർക്കാം:
ബ്ലോക്ക് പൊസിഷനിംഗ്
ഒരു വാചകം തടയുക
വാചകം തടയുക 2
പേജിലെ ചില ഘടകങ്ങൾ മാത്രം. ഇത് വെറും വാചകം, ലിങ്കുകൾ, ലിസ്റ്റുകൾ, ചിത്രങ്ങൾ മുതലായവ ആകാം.
അവർക്ക് വ്യത്യസ്തമായ സ്വത്ത് മൂല്യങ്ങൾ നൽകുക ഫ്ലോട്ട്:
#blok1(ബോർഡർ:1px ഖര ചുവപ്പ്; വീതി:150px; ഉയരം:50px; ഫ്ലോട്ട്:ഇടത്; ) #blok2(ബോർഡർ:1px ഖര ചുവപ്പ്; വീതി:150px; ഉയരം:50px; ഫ്ലോട്ട്:വലത്; )
ഇപ്പോൾ ബ്രൗസറിലെ ഞങ്ങളുടെ പേജ് ഇതുപോലെ കാണപ്പെടുന്നു:
അവർക്ക് ഒരേ മൂല്യങ്ങൾ ഉണ്ടെങ്കിൽ എന്തുചെയ്യും? ഉദാഹരണത്തിന്:
#blok1(ബോർഡർ:1px ഖര ചുവപ്പ്; വീതി:150px; ഉയരം:50px; ഫ്ലോട്ട്:ഇടത്; ) #blok2(ബോർഡർ:1px ഖര ചുവപ്പ്; വീതി:150px; ഉയരം:50px; ഫ്ലോട്ട്:ഇടത്; )
അപ്പോൾ രണ്ടാമത്തെ ബ്ലോക്ക് ആദ്യ ബ്ലോക്കിൻ്റെ വലതുവശത്ത് അമർത്തപ്പെടും:
സമാന മൂല്യങ്ങൾക്ക് സാഹചര്യം സമാനമായിരിക്കും ശരിയാണ്:
#blok1(ബോർഡർ:1px ഖര ചുവപ്പ്; വീതി:150px; ഉയരം:50px; ഫ്ലോട്ട്:വലത്; ) #blok2(ബോർഡർ:1px ഖര ചുവപ്പ്; വീതി:150px; ഉയരം:50px; ഫ്ലോട്ട്:വലത്; )
ദയവായി ശ്രദ്ധിക്കുക: ആദ്യം ബ്ലോക്ക് 1 വലത് അരികിലേക്ക് അമർത്തും, തുടർന്ന് ബ്ലോക്ക് 2 അതിലേക്ക് അമർത്തും.
ബ്ലോക്കുകൾ വലത് അരികിലേക്ക് അമർത്തി, എന്നാൽ ഒന്നിനു താഴെയായി സ്ഥിതി ചെയ്യുന്നെങ്കിൽ എന്തുചെയ്യും. ഇതിനായി ഒരു വസ്തുവുണ്ട് വ്യക്തമായ, ഒരു ഫ്ലോട്ടിംഗ് ബ്ലോക്കിൻ്റെ ഏത് വശങ്ങൾ മറ്റ് ഫ്ലോട്ടിംഗ് ബ്ലോക്കുകളോട് ചേർന്ന് പാടില്ല എന്ന് വ്യക്തമാക്കുന്നു. ഈ പ്രോപ്പർട്ടിക്ക് നാല് മൂല്യങ്ങളിൽ ഒന്ന് ഉണ്ടായിരിക്കാം:
• വിട്ടുപോയി- ബ്ലോക്ക് എല്ലാ ഇടത് വശത്തുള്ള ബ്ലോക്കുകൾക്കും താഴെയായിരിക്കണം.


• ശരിയാണ്- ബ്ലോക്ക് എല്ലാ വലതുവശത്തുള്ള ബ്ലോക്കുകൾക്കും താഴെയായിരിക്കണം.


• രണ്ടും- ബ്ലോക്ക് എല്ലാ ഫ്ലോട്ടിംഗ് ബ്ലോക്കുകൾക്കും താഴെയായിരിക്കണം.


• ഒന്നുമില്ല- നിയന്ത്രണങ്ങളൊന്നുമില്ല, ഇതാണ് സ്ഥിരസ്ഥിതി മൂല്യം.


നമ്മുടെ അവസാന ഉദാഹരണത്തിലെ രണ്ടാമത്തെ ബ്ലോക്കിനായി ഈ പ്രോപ്പർട്ടി സജ്ജീകരിക്കാം:
#blok1(ബോർഡർ:1px ഖര ചുവപ്പ്; വീതി:150px; ഉയരം:50px; ഫ്ലോട്ട്:വലത്; ) #blok2(ബോർഡർ:1px ഖര ചുവപ്പ്; വീതി:150px; ഉയരം:50px; ഫ്ലോട്ട്:വലത്; വ്യക്തമായ:വലത്; )
ഇപ്പോൾ അത് ഞാൻ ആഗ്രഹിച്ച രീതിയിൽ മാറി: ഒരു ബ്ലോക്ക് മറ്റൊന്നിന് കീഴിൽ:

മുമ്പത്തെ പാഠത്തിൽ, സമ്പൂർണ്ണ സ്ഥാനനിർണ്ണയം ഉപയോഗിച്ച് ഞങ്ങൾ ഇതുപോലുള്ള ഒരു പേജ് സൃഷ്ടിച്ചു:

ഫ്ലോട്ടിംഗ് ബ്ലോക്കുകൾ ഉപയോഗിച്ച് ഇത് എങ്ങനെ ചെയ്യാമെന്ന് നോക്കാം. അതിനാൽ, പേജിൻ്റെ കോഡ് ഇപ്രകാരമാണ്:
ബ്ലോക്ക് പൊസിഷനിംഗ്
സൈറ്റ് തലക്കെട്ട്
ഉള്ളടക്കം
വാർത്താ ബ്ലോക്ക്
സൈറ്റിൻ്റെ താഴെ
style.css പേജിൽ, ആദ്യം നമ്മുടെ ബ്ലോക്കുകളുടെ അളവുകളും പശ്ചാത്തലവും സജ്ജമാക്കാം:
#header(പശ്ചാത്തലം:ഇരുണ്ട; വീതി:715px; ഉയരം:100px; ) #മെനു(പശ്ചാത്തലം:ഓൾഡ്ലേസ്; വീതി:190px; ഉയരം:300px; ) #ഉള്ളടക്കം(പശ്ചാത്തലം:ഓൾഡ്ലേസ്; വീതി:525px; ഉയരം:300px; ) #footer (പശ്ചാത്തലം:ഇരുണ്ട; വീതി:715px; ഉയരം:30px; ) #വാർത്ത(പശ്ചാത്തലം:മഞ്ഞ; വീതി:150px; ഉയരം:280px; )
ഇപ്പോൾ ഞങ്ങളുടെ ബ്ലോക്കുകൾ ഒരു സാധാരണ ഒഴുക്കിലാണ് സ്ഥിതി ചെയ്യുന്നത്, അതായത്. ഒന്നിന് താഴെ മറ്റൊന്ന്. നമുക്ക് ബ്ലോക്കുകൾ ഉണ്ടാക്കണം മെനുഒപ്പം ഉള്ളടക്കംഫ്ലോട്ടിംഗ്, ഇടത് കൈ. ഒരു ബ്ലോക്ക് വാർത്തവലത് അരികിൽ അമർത്തണം, അതായത്. ഞങ്ങൾ അതിനെ വലംകൈയ്യൻ ഫ്ലോട്ടിംഗ് ബ്ലോക്ക് ആക്കും:
#header(പശ്ചാത്തലം:ഇരുണ്ട; വീതി:715px; ഉയരം:100px; ) #മെനു(പശ്ചാത്തലം:ഓൾഡ്ലേസ്; വീതി:190px; ഉയരം:300px; ഫ്ലോട്ട്:ഇടത്; ) #ഉള്ളടക്കം(പശ്ചാത്തലം:ഓൾഡ്ലേസ്; വീതി:525px; ഉയരം:300px ; ഫ്ലോട്ട്:ഇടത് ;
ബ്രൗസറിലെ ഞങ്ങളുടെ പേജ് ഇതുപോലെ കാണപ്പെടുന്നു:

നമ്മുടെ ന്യൂസ് ബ്ലോക്ക് നോക്കാം, അത് ബ്ലോക്കിലെ ടെക്‌സ്‌റ്റിന് താഴെയായി സ്ഥിതി ചെയ്യുന്നത് കാണാം ഉള്ളടക്കം. പക്ഷേ, ന്യൂസ് ബ്ലോക്ക് വലതുവശത്തായിരിക്കണമെന്ന് ഞങ്ങൾ ആഗ്രഹിച്ചു, വാചകം ഇടതുവശത്ത് ഒഴുകും.
എന്തുകൊണ്ടാണ് ഇത് ഞങ്ങൾക്ക് വിജയിക്കാത്തത്? കാരണം നമ്മുടെ ബ്ലോക്ക് വാർത്ത html കോഡിൽ ടെക്‌സ്‌റ്റിന് താഴെയാണ് സ്ഥിതിചെയ്യുന്നത്, അതിന് താഴെയുള്ള ടെക്‌സ്‌റ്റ് മാത്രമേ അതിന് ചുറ്റും ഒഴുകുകയുള്ളൂ. ഇത് പരിഹരിക്കാൻ, ഞങ്ങൾ ഞങ്ങളുടെ സ്ഥാനം സ്ഥാപിക്കേണ്ടതുണ്ട് div="news"വാചകത്തിന് മുകളിൽ (അതായത് "ഉള്ളടക്കം" എന്ന വാക്കിന് മുമ്പ്):
ബ്ലോക്ക് പൊസിഷനിംഗ്
സൈറ്റ് തലക്കെട്ട്
വാർത്താ ബ്ലോക്ക്
ഉള്ളടക്കം
സൈറ്റിൻ്റെ താഴെ
ഇപ്പോൾ ഞങ്ങളുടെ വാർത്താ ബ്ലോക്ക് അതിൻ്റെ സ്ഥാനത്താണ്:

മുകളിലേക്കും വലത്തേയ്ക്കും അടുത്ത് അമർത്താതിരിക്കാൻ, ഈ ബ്ലോക്കിനായി ഞങ്ങൾ ഒരു മാർജിൻ മൂല്യം ചേർക്കും:
#വാർത്ത(പശ്ചാത്തലം:മഞ്ഞ; വീതി:150px; ഉയരം:280px; ഫ്ലോട്ട്:വലത്; മാർജിൻ:10px; )
കേവല സ്ഥാനനിർണ്ണയത്തിൻ്റെ അതേ ഫലം ഞങ്ങൾ ഇപ്പോൾ നേടിയിട്ടുണ്ട്.

ഫ്ലോട്ടിംഗ് ബ്ലോക്കുകൾ ഉപയോഗിക്കുന്നത് ഒരു പേജ് ഇടാൻ എളുപ്പമാണെന്ന് സമ്മതിക്കുക: നിങ്ങൾ പിക്സലുകൾ എണ്ണേണ്ടതില്ല, കോഡ് ചെറുതാണ്. കൂടാതെ, ഒരു “ഫ്ലൂയിഡ്” ലേഔട്ട് ഉപയോഗിച്ച്, സ്‌ക്രീനിൽ ബ്ലോക്കിൻ്റെ കൃത്യമായ സ്ഥാനം സൂചിപ്പിക്കാൻ ഞങ്ങൾക്ക് കഴിയില്ല, ഫ്ലോട്ടിംഗ് ബ്ലോക്കുകളുടെ സഹായത്തോടെ ഞങ്ങൾക്ക് ഇത് ആവശ്യമില്ല, ഒരു ലാൻഡ്‌മാർക്ക് മാത്രം സൂചിപ്പിച്ചാൽ മതി (ഇടതുവശത്ത്, ഓൺ വലത്, താഴെ അല്ലെങ്കിൽ ഒരേ വരിയിൽ).
നിശ്ചിത ബ്ലോക്കുകൾ
നിങ്ങൾ ഓർക്കുന്നതുപോലെ, സ്ഥിരമായ പൊസിഷനിംഗ് ഉപയോഗിച്ച്, കാഴ്ച ഏരിയയുമായി ബന്ധപ്പെട്ട് ബ്ലോക്ക് നിശ്ചയിച്ചിരിക്കുന്നു. ചില വഴികളിൽ, നിശ്ചിത ബ്ലോക്കുകൾ ഫ്രെയിമുകൾക്ക് സമാനമാണ്. സ്ക്രോളിംഗ് ഒരു ഫ്രെയിമിനുള്ളിൽ മാത്രമേ ലഭ്യമാകൂ, എന്നാൽ ഒരു ബ്ലോക്കിനുള്ളിൽ അല്ല.
ഫിക്സഡ് ബ്ലോക്കുകൾക്ക് ഒരു പ്രധാന പോരായ്മയുണ്ട്: അവയെ Internet Explorer ബ്രൗസറുകൾ പിന്തുണയ്ക്കുന്നില്ല. അതിനാൽ, അവ ഇപ്പോൾ ഉപയോഗിക്കാൻ പാടില്ല. അതിനാൽ, നിങ്ങൾക്ക് ഇത് സ്വയം പരീക്ഷിക്കാൻ താൽപ്പര്യമുണ്ടെങ്കിൽ (ഉദാഹരണത്തിന്, ഓപ്പറ ബ്രൗസറിൽ) അത്തരമൊരു നിയമത്തിൻ്റെ വാക്യഘടന മാത്രമേ ഞങ്ങൾ ഇവിടെ സൂചിപ്പിക്കൂ.
#ബ്ലോക്ക് (സ്ഥാനം: സ്ഥിരം; ഇടത്: 0px; മുകളിൽ: 0px; )
പേജ് സ്ക്രോൾ ചെയ്യുമ്പോൾ ഐഡൻ്റിഫയർ "ബ്ലോക്ക്" ഉള്ള ബ്ലോക്ക് നിലനിൽക്കും.
ഇന്നത്തേക്ക് അത്രയേ ഉള്ളൂ. അടുത്ത പാഠത്തിൽ, ബ്ലോക്കുകളുടെ ചില സവിശേഷതകളും അവയുടെ തരങ്ങളും നമുക്ക് പരിചയപ്പെടാം.
HTML-ലെ ഒരു ബ്ലോക്ക് ഘടകം, സ്ഥിരസ്ഥിതിയായി, അതിൻ്റെ പാരൻ്റ് എലമെൻ്റിൻ്റെ മുഴുവൻ വീതിയും ഉൾക്കൊള്ളുന്ന ഒരു ഘടകമാണ്. പാരൻ്റ് എലമെൻ്റ് മറ്റൊരു ബ്ലോക്ക് ഘടകമോ ബ്രൗസർ വിൻഡോയോ ആകാം. CSS പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഒരു ബ്ലോക്ക് എലമെൻ്റിൻ്റെ വീതിയും ഉയരവും സജ്ജമാക്കാൻ കഴിയും. പൊസിഷനിംഗ് ബ്ലോക്ക് എലമെൻ്റുകൾ ബ്രൗസർ വിൻഡോയിൽ അവയെ സ്ഥാനപ്പെടുത്തുന്ന പ്രക്രിയയാണ്, അവയുമായി ബന്ധപ്പെട്ട CSS പ്രോപ്പർട്ടികൾ സ്ഥാനം, ഇടത്, മുകളിൽ, വലത്, താഴെ എന്നിവ ഉപയോഗിച്ച്. CSS പൊസിഷൻ പ്രോപ്പർട്ടി രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത് ലഭ്യമായ നാല് പൊസിഷനിംഗ് തരങ്ങളിൽ ഒന്ന് സജ്ജീകരിക്കാനാണ്: സ്റ്റാറ്റിക് (ഡിഫോൾട്ട്), കേവലം, സ്ഥിരം, ആപേക്ഷികം. ശേഷിക്കുന്ന CSS പ്രോപ്പർട്ടികൾ, അതായത് ഇടത് , മുകളിൽ , വലത്, താഴെ , പാരൻ്റ് എലമെൻ്റിൻ്റെ ഇടത്, മുകളിൽ, വലത്, താഴെ അറ്റങ്ങൾ എന്നിവയുമായി ബന്ധപ്പെട്ട ദൂരം സജ്ജീകരിക്കാൻ ഉപയോഗിക്കുന്നു. കൂടാതെ, ചില പ്രോപ്പർട്ടികൾ സജ്ജീകരിക്കുമ്പോൾ, ബ്ലോക്ക് ഘടകങ്ങൾക്ക് പരസ്പരം ഓവർലാപ്പ് ചെയ്യാൻ കഴിയും, കൂടാതെ ഈ സവിശേഷത വെബ്‌സൈറ്റുകളിലും ഉപയോഗിക്കാനാകും.
ഡിഫോൾട്ട് പൊസിഷനിംഗ് (സ്റ്റാറ്റിക്)
നിങ്ങൾ ഒരു ബ്ലോക്ക് മൂലകത്തിനോ അല്ലെങ്കിൽ നിർദ്ദിഷ്ട സ്റ്റാറ്റിക് എന്നതിനോ ഒരു സ്ഥാനം വ്യക്തമാക്കിയിട്ടില്ലെങ്കിൽ, അത് തന്നെയാണ്, ബ്ലോക്ക് ഘടകങ്ങൾ ക്രമത്തിലാണ് ക്രമീകരിച്ചിരിക്കുന്നത്. മാത്രമല്ല, അടുത്ത ബ്ലോക്ക് (ഉദാഹരണത്തിന്: ചുവപ്പ്) ഒരു പുതിയ ലൈനിൽ സ്ഥിതിചെയ്യുന്നു. കൂടാതെ, ഇടത്, മുകളിൽ, വലത്, താഴെ എന്നിങ്ങനെയുള്ള ദൂരങ്ങൾ ക്രമീകരിക്കുന്നത് ഈ സ്ഥാനനിർണ്ണയത്തെ ബാധിക്കില്ല.



കേവല സ്ഥാനനിർണ്ണയം (സമ്പൂർണ)
സമ്പൂർണ്ണ സ്ഥാനനിർണ്ണയം ഉപയോഗിച്ച്, ഇടത്, മുകളിൽ, വലത്, താഴെ പ്രോപ്പർട്ടികൾ എന്നിവയാൽ വ്യക്തമാക്കിയ ദൂരങ്ങൾ ഉപയോഗിച്ച് ബ്രൗസർ വിൻഡോയുടെ അരികുകളുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ഒരു ഘടകത്തിൻ്റെ സ്ഥാനം വ്യക്തമാക്കുന്നു. നിങ്ങൾ ഒരേ സമയം ഇടത്തോട്ടും വലത്തോട്ടും ദൂരങ്ങൾ വ്യക്തമാക്കുകയും അവ പരസ്പരം വൈരുദ്ധ്യം കാണിക്കുകയും ചെയ്യുന്നുവെങ്കിൽ, ഇടത് വശത്ത് മുൻഗണന നൽകും, മുകളിലേക്കും താഴേക്കും ദൂരത്തിന് മുൻഗണന നൽകും. ഡ്രോപ്പ്-ഡൗൺ മെനുകൾ, സൈറ്റ് ലേഔട്ട് മുതലായവ സൃഷ്ടിക്കുന്നതിന്, പരസ്പരം ആപേക്ഷികമായി വിവിധ ഘടകങ്ങൾ സ്ഥാപിക്കാൻ ആവശ്യമായി വരുമ്പോൾ, ഡിസൈൻ ആവശ്യങ്ങൾക്കായി ആപേക്ഷിക സ്ഥാനനിർണ്ണയവുമായി സംയോജിച്ച് സമ്പൂർണ്ണ സ്ഥാനനിർണ്ണയം പലപ്പോഴും ഉപയോഗിക്കുന്നു.




നിശ്ചിത സ്ഥാനനിർണ്ണയം
ഫിക്സഡ് പൊസിഷനിംഗ് മറ്റ് തരത്തിലുള്ള പൊസിഷനിംഗിൽ നിന്ന് വ്യത്യസ്തമാണ് കൂടാതെ നിങ്ങൾ പേജ് സ്ക്രോൾ ചെയ്യുമ്പോൾ ഉള്ളടക്കത്തിനൊപ്പം നീങ്ങുന്നില്ല. ബ്രൗസർ വിൻഡോയുടെ അരികുകളിൽ ഇടത് , മുകളിൽ , വലത് , താഴെയുള്ള പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ച് സ്ഥിര-സ്ഥാന ബ്ലോക്ക് ഘടകങ്ങൾ നങ്കൂരമിട്ടിരിക്കുന്നു. ഫ്രെയിം ഇൻ്റർഫേസുകൾ (ബ്രൗസർ വിൻഡോ പല മേഖലകളായി തിരിച്ചിരിക്കുന്നു), ഒരു നിശ്ചിത മെനു, ഒരു നിശ്ചിത സൈറ്റ് ഫൂട്ടർ, "സ്ഥിരം" ബ്ലോക്കുകൾ (ലിങ്കുകളുടെ ലിസ്റ്റ്, സോഷ്യൽ ബട്ടണുകൾ മുതലായവ) സൃഷ്ടിക്കാൻ ഫിക്സഡ് പൊസിഷനിംഗ് ഉപയോഗിക്കുന്നു.




ആപേക്ഷിക സ്ഥാനനിർണ്ണയം
നിലവിലെ സ്ഥാനവുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ഇടത്, മുകളിൽ, വലത്, താഴെ എന്നീ ദൂരങ്ങൾ വ്യക്തമാക്കിയാണ് ആപേക്ഷിക സ്ഥാനനിർണ്ണയം വ്യക്തമാക്കുന്നത്.




എന്നിരുന്നാലും, മാർജിൻ പ്രോപ്പർട്ടി ഉപയോഗിച്ചും ഈ ബ്ലോക്ക് സ്ഥാനം സൃഷ്ടിക്കാൻ കഴിയും.



ആപേക്ഷിക സ്ഥാനനിർണ്ണയം സ്വന്തമായി ഉപയോഗിക്കുന്നത് രസകരമല്ല, അത് കേവല സ്ഥാനനിർണ്ണയവുമായി ചേർന്നാണ് കൂടുതലും ഉപയോഗിക്കുന്നത്.
നമുക്ക് ഓപ്ഷനുകൾ പരിഗണിക്കാം:


സ്റ്റാറ്റിക് ഒഴികെയുള്ള എല്ലാ സ്ഥാന ഘടകങ്ങളുമായും അവ പ്രവർത്തിക്കുന്നു.
സ്ഥാനനിർണ്ണയ ഉദാഹരണം.
ഘടകങ്ങൾക്ക് പരസ്പരം ഓവർലാപ്പ് ചെയ്യാൻ കഴിയും!
ബാക്കിയുള്ളവയ്ക്ക് മുകളിൽ ഒരു ഘടകം പ്രദർശിപ്പിക്കുന്നു!
പൊസിഷൻ പ്രോപ്പർട്ടിക്ക് 4 മൂല്യങ്ങളുണ്ട്: സ്ഥിരം, സ്ഥിരം, ആപേക്ഷികം, കേവലം. ഈ ഓരോ അർത്ഥവും ഉപയോഗത്തിൻ്റെ ഒരു ഉദാഹരണം ഉപയോഗിച്ച് ചുവടെ പ്രദർശിപ്പിക്കും.
ഒരു പേജിലെ ഘടകങ്ങളുടെ എല്ലാത്തരം സ്ഥാനനിർണ്ണയങ്ങളും വിശദമായി പരിശോധിക്കുന്നതിന് മുമ്പ്, ഡോക്യുമെൻ്റ് ഫ്ലോ എന്താണെന്ന് ഞങ്ങൾ പരിഗണിക്കേണ്ടതുണ്ട്.
ഡോക്യുമെൻ്റ് ഫ്ലോ
സ്ഥിരസ്ഥിതിയായി, ഒരു വെബ് പേജിലെ ഘടകങ്ങൾ അവ HTML പ്രമാണത്തിൽ ദൃശ്യമാകുന്ന ക്രമത്തിൽ പ്രദർശിപ്പിക്കും, അതായത്, ബ്ലോക്ക് ഘടകങ്ങൾ അവയ്ക്ക് ലഭ്യമായ മുഴുവൻ വീതിയും ഉൾക്കൊള്ളുകയും ലംബമായി ഒന്നിന് താഴെയായി അടുക്കുകയും ചെയ്യുന്നു. ലഭ്യമായ മുഴുവൻ വീതിയും ഉൾക്കൊള്ളുന്നത് വരെ ഇൻലൈൻ ഘടകങ്ങൾ തിരശ്ചീനമായി നിരത്തിയിരിക്കുന്നു, മുഴുവൻ വീതിയും കൈവശപ്പെടുത്തിയ ശേഷം, ഒരു ലൈൻ ബ്രേക്ക് ഉണ്ടാക്കി എല്ലാം വീണ്ടും ആരംഭിക്കുന്നു. മൂലകങ്ങളുടെ ഈ ക്രമീകരണത്തെ വിളിക്കുന്നു സാധാരണ ഒഴുക്ക്(എന്നും വിളിക്കുന്നു പ്രമാണ പ്രവാഹംഅല്ലെങ്കിൽ പൊതുവായ ഒഴുക്ക്).
സാധാരണ ഒഴുക്കിൽ നിന്ന് ഒരു ഘടകം നീക്കം ചെയ്യാൻ നിങ്ങൾക്ക് ഫ്ലോട്ട് അല്ലെങ്കിൽ പൊസിഷൻ പ്രോപ്പർട്ടി ഉപയോഗിക്കാം. ഒരു ഘടകം സാധാരണ ഒഴുക്കിൽ നിന്ന് "വീഴുകയാണെങ്കിൽ", ആ ഘടകത്തിന് താഴെയുള്ള കോഡിൽ സ്ഥിതി ചെയ്യുന്ന ഘടകങ്ങൾ വെബ് പേജിൽ അതിൻ്റെ സ്ഥാനത്തേക്ക് മാറ്റപ്പെടും.
സ്റ്റാറ്റിക് പൊസിഷനിംഗ്
ഒരു വെബ് പേജിലെ എല്ലാ ഘടകങ്ങളുടെയും സ്ഥിരസ്ഥിതി സ്ഥാനനിർണ്ണയമാണ് സ്റ്റാറ്റിക്. നിങ്ങൾ ഒരു ഘടകത്തിന് പൊസിഷൻ പ്രോപ്പർട്ടി പ്രയോഗിച്ചില്ലെങ്കിൽ, അത് സ്റ്റാറ്റിക്ക് ആയിരിക്കും കൂടാതെ ഘടകങ്ങളുടെ പൊതുവായ ഒഴുക്ക് അനുസരിച്ച് വെബ് പേജിൽ ദൃശ്യമാകും.
സ്ഥിരമായി സ്ഥാനമുള്ള ഒരു ഘടകത്തിന് മുകളിൽ, ഇടത്, വലത് അല്ലെങ്കിൽ താഴെ CSS പ്രോപ്പർട്ടികൾ പ്രയോഗിക്കുമ്പോൾ, അവ അവഗണിക്കപ്പെടും.
ആവശ്യമെങ്കിൽ, സ്റ്റാറ്റിക് മൂല്യം ഉപയോഗിച്ച് നിങ്ങൾക്ക് സ്റ്റൈൽ ഷീറ്റിൽ സ്റ്റാറ്റിക് പൊസിഷനിംഗ് സജ്ജമാക്കാൻ കഴിയും:
ആദ്യ ഖണ്ഡിക.
രണ്ടാം ഖണ്ഡിക.


ശ്രമിക്കുക »
നിശ്ചിത സ്ഥാനനിർണ്ണയം
ബ്രൗസർ വിൻഡോയുമായി ബന്ധപ്പെട്ട പേജിൽ നിശ്ചിത സ്ഥാനനിർണ്ണയമുള്ള ഘടകങ്ങൾ സ്ഥിതിചെയ്യുന്നു. അത്തരം ഘടകങ്ങൾ മൊത്തത്തിലുള്ള ഫ്ലോയിൽ നിന്ന് നീക്കം ചെയ്യപ്പെടുന്നു, ഫ്ലോയിലെ നിശ്ചിത ഘടകത്തെ പിന്തുടരുന്ന ഘടകങ്ങൾ അതിനെ അവഗണിക്കുകയും വെബ് പേജിൽ അതിൻ്റെ സ്ഥാനം നേടുകയും ചെയ്യും.
ഫിക്സഡ് പൊസിഷനിംഗ് ഉള്ള ഘടകങ്ങൾക്ക് മറ്റ് ഘടകങ്ങളെ ഓവർലാപ്പ് ചെയ്യാനും പൂർണ്ണമായോ ഭാഗികമായോ മറയ്ക്കാനും കഴിയും എന്ന വസ്തുത ശ്രദ്ധിക്കേണ്ടതാണ്. ദൈർഘ്യമേറിയ പേജുകളിലൂടെ സ്ക്രോൾ ചെയ്യുമ്പോൾ, അവ ഒരേ സ്ഥലത്ത് ശേഷിക്കുന്ന ചലനരഹിത വസ്തുക്കളുടെ പ്രഭാവം സൃഷ്ടിക്കുന്നു:

ടെക്സ്റ്റ് ടെക്സ്റ്റ് ടെക്സ്റ്റ് ടെക്സ്റ്റ് ടെക്സ്റ്റ് ടെക്സ്റ്റ് ചില ടെക്സ്റ്റ് ടെക്സ്റ്റ് ടെക്സ്റ്റ് ടെക്സ്റ്റ് ടെക്സ്റ്റ് ടെക്സ്റ്റ്


ശ്രമിക്കുക »
ആപേക്ഷിക സ്ഥാനനിർണ്ണയം
സ്റ്റാറ്റിക് മൂലകങ്ങൾ പോലെ താരതമ്യേന സ്ഥാനമുള്ള മൂലകങ്ങൾ പൊതുവായ ഒഴുക്കിൽ നിലനിൽക്കും. താരതമ്യേന സ്ഥാനമുള്ള മൂലകങ്ങൾക്ക് മുകളിൽ , ഇടത് , വലത് , അല്ലെങ്കിൽ താഴെയുള്ള പ്രോപ്പർട്ടികൾ പ്രയോഗിക്കുമ്പോൾ, അവ അവയുടെ സ്ഥാനവുമായി ആപേക്ഷികമായി നീങ്ങും, മൂലകം യഥാർത്ഥത്തിൽ സ്ഥിതിചെയ്യുന്ന ശൂന്യമായ ഇടം അവശേഷിപ്പിക്കും.
അത്തരം ഘടകങ്ങൾ അവയെ ചുറ്റിപ്പറ്റിയുള്ള മൂലകങ്ങളുടെ സ്ഥാനത്തെ ബാധിക്കില്ല, ശേഷിക്കുന്ന മൂലകങ്ങൾ താരതമ്യേന സ്ഥാനമുള്ള മൂലകത്താൽ ഓവർലാപ്പ് ചെയ്യാവുന്നതാണ്:
ആദ്യ ലെവൽ ശീർഷകം.
താരതമ്യേന സ്ഥാനമുള്ള തലക്കെട്ട്.
മൂന്നാം ലെവൽ തലക്കെട്ട്.


ശ്രമിക്കുക »
ശ്രദ്ധിക്കുക: ആപേക്ഷിക ഘടകങ്ങൾ സാധാരണയായി കേവല മൂലകങ്ങളുടെ പേരായി ഉപയോഗിക്കുന്നു.
സമ്പൂർണ്ണ സ്ഥാനനിർണ്ണയം
പൂർണ്ണമായും സ്ഥാനമുള്ള ഘടകങ്ങൾ മൊത്തത്തിലുള്ള ഒഴുക്കിൽ നിന്ന് പൂർണ്ണമായും നീക്കംചെയ്യുന്നു, ശേഷിക്കുന്ന ഘടകങ്ങൾ ശൂന്യമായ ഇടം എടുക്കും, പൂർണ്ണമായും സ്ഥാനമുള്ള ഘടകങ്ങളെ പൂർണ്ണമായും അവഗണിക്കും. മുകളിൽ , ഇടത് , വലത് , അല്ലെങ്കിൽ താഴെയുള്ള പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് വെബ് പേജിൽ എവിടെ വേണമെങ്കിലും ഘടകം സ്ഥാപിക്കാൻ കഴിയും.
പൂർണ്ണമായി സ്ഥാനമുള്ള എല്ലാ ഘടകങ്ങളും ബ്രൗസർ വിൻഡോയുമായി ബന്ധപ്പെട്ടിരിക്കുന്നു അല്ലെങ്കിൽ കേവലമായ, സ്ഥിരമായ അല്ലെങ്കിൽ ആപേക്ഷികമായ ഒരു സ്ഥാന സ്വത്ത് ഉള്ള ഏറ്റവും അടുത്ത സ്ഥാനമുള്ള പൂർവ്വികനോട് (ഒന്ന് ഉണ്ടെങ്കിൽ) ആപേക്ഷികമാണ്.

സമ്പൂർണ്ണ സ്ഥാനനിർണ്ണയം ഉപയോഗിച്ച് ലോഗോയുടെ സ്ഥാനം മാറ്റാം.
ലോഗോ ഇപ്പോൾ പേജിൻ്റെ മുകളിൽ വലത് കോണിൽ സ്ഥിതിചെയ്യും.


ശ്രമിക്കുക »
ഓവർലാപ്പിംഗ് ഘടകങ്ങൾ
ഘടകങ്ങൾ പേജിൻ്റെ മൊത്തത്തിലുള്ള ഒഴുക്കിന് പുറത്തായിരിക്കുമ്പോൾ, അവയ്ക്ക് പരസ്പരം ഓവർലാപ്പ് ചെയ്യാൻ കഴിയും. സാധാരണഗതിയിൽ, ഘടകങ്ങളുടെ ക്രമം പേജിൻ്റെ HTML കോഡിലെ അവയുടെ ക്രമവുമായി പൊരുത്തപ്പെടുന്നു, എന്നിരുന്നാലും, CSS പ്രോപ്പർട്ടി z- സൂചിക ഉപയോഗിച്ച് ഓവർലാപ്പിൻ്റെ ക്രമം നിയന്ത്രിക്കാൻ സാധിക്കും, അതിൻ്റെ മൂല്യം കൂടുന്തോറും മൂലകം ഉയർന്നതായിരിക്കും.
z-സൂചിക: 1;
z-സൂചിക: 0;
z-സൂചിക: 2;