അവസാനം അപ്ഡേറ്റ് ചെയ്തത്: 04/28/2016

CSS എലമെന്റ് പൊസിഷനിംഗ് കഴിവുകൾ നൽകുന്നു, അതായത് പേജിലെ ഒരു പ്രത്യേക സ്ഥലത്ത് ഒരു ഘടകം സ്ഥാപിക്കാം.

CSS-ൽ പൊസിഷനിംഗ് നിയന്ത്രിക്കുന്ന പ്രധാന പ്രോപ്പർട്ടി പൊസിഷൻ പ്രോപ്പർട്ടി ആണ്. ഈ പ്രോപ്പർട്ടിക്ക് ഇനിപ്പറയുന്ന മൂല്യങ്ങളിൽ ഒന്ന് എടുക്കാം:

സ്റ്റാറ്റിക് : സ്റ്റാൻഡേർഡ് എലമെന്റ് പൊസിഷനിംഗ്, ഡിഫോൾട്ട് മൂല്യം

absolute : മൂലകം അതിന്റെ സ്ഥാന ഗുണം സ്ഥിരമല്ലെങ്കിൽ കണ്ടെയ്‌നർ മൂലകത്തിന്റെ അതിരുകൾക്ക് ആപേക്ഷികമാണ്

ആപേക്ഷിക : മൂലകം അതിന്റെ സ്ഥിരസ്ഥിതി സ്ഥാനവുമായി ബന്ധപ്പെട്ടിരിക്കുന്നു. സാധാരണഗതിയിൽ, ആപേക്ഷിക സ്ഥാനനിർണ്ണയത്തിന്റെ പ്രധാന ലക്ഷ്യം ഒരു മൂലകത്തെ നീക്കുകയല്ല, മറിച്ച് അതിന്റെ നെസ്റ്റഡ് മൂലകങ്ങളുടെ കേവല സ്ഥാനനിർണ്ണയത്തിനായി ഒരു പുതിയ ആങ്കർ പോയിന്റ് സ്ഥാപിക്കുക എന്നതാണ്.

fixed : ബ്രൗസർ വിൻഡോയുമായി ബന്ധപ്പെട്ട് മൂലകം സ്ഥാപിച്ചിരിക്കുന്നു, സ്ക്രോൾ ചെയ്യുമ്പോൾ സ്ഥാനം മാറാത്ത സ്ഥിര ഘടകങ്ങൾ സൃഷ്ടിക്കാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു

നിങ്ങൾ ഒരേസമയം ഫ്ലോട്ട് പ്രോപ്പർട്ടിയും സ്റ്റാറ്റിക് (അതായത്, ഡിഫോൾട്ട് തരം) ഒഴികെയുള്ള ഏതെങ്കിലും പൊസിഷനിംഗ് തരവും ഒരു ഘടകത്തിലേക്ക് പ്രയോഗിക്കരുത്.

സമ്പൂർണ്ണ സ്ഥാനനിർണ്ണയം

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

ഹലോ വേൾഡ്

ഇവിടെ വ്യൂപോർട്ട് ബോർഡറിന്റെ ഇടതുവശത്ത് 100 പിക്സലുകളും താഴെ നിന്ന് 50 പിക്സലുകളുമായിരിക്കും സമ്പൂർണ്ണ സ്ഥാനമുള്ള div.

ഈ ഡിവി എലമെന്റിന് ശേഷം മറ്റ് ചില ഘടകങ്ങൾ ഉണ്ടെന്നത് അത്ര പ്രധാനമല്ല. ഈ ഡിവി ബ്ലോക്ക് ഏത് സാഹചര്യത്തിലും ബ്രൗസർ വ്യൂപോർട്ടിന്റെ അതിരുകൾക്ക് ആപേക്ഷികമായിരിക്കും.

കേവല സ്ഥാനനിർണ്ണയമുള്ള ഒരു ഘടകം മറ്റൊരു കണ്ടെയ്‌നറിൽ സ്ഥിതിചെയ്യുന്നുണ്ടെങ്കിൽ, അതിന്, സ്റ്റാറ്റിക്കിന് തുല്യമല്ലാത്ത ഒരു സ്ഥാന പ്രോപ്പർട്ടി മൂല്യമുണ്ടെങ്കിൽ, ആ മൂലകം കണ്ടെയ്‌നറിന്റെ അതിരുകൾക്ക് ആപേക്ഷികമാണ്:

ആപേക്ഷിക സ്ഥാനനിർണ്ണയം

ആപേക്ഷിക മൂല്യം ഉപയോഗിച്ച് ആപേക്ഷിക സ്ഥാനനിർണ്ണയവും വ്യക്തമാക്കുന്നു. മൂലകം മാറ്റിയിരിക്കുന്ന നിർദ്ദിഷ്ട സ്ഥാനം വ്യക്തമാക്കുന്നതിന്, മുകളിൽ, ഇടത്, വലത്, താഴെയുള്ള ഒരേ പ്രോപ്പർട്ടികൾ ഉപയോഗിക്കുന്നു:

z-ഇൻഡക്സ് പ്രോപ്പർട്ടി

സ്ഥിരസ്ഥിതിയായി, രണ്ട് ഘടകങ്ങൾക്ക് ഒരേ ബോർഡർ ഉള്ളപ്പോൾ, html മാർക്ക്അപ്പിൽ അവസാനം നിർവചിച്ചിരിക്കുന്ന ഘടകം മറ്റൊന്നിന് മുകളിൽ പ്രദർശിപ്പിക്കും. എന്നിരുന്നാലും, മൂലകങ്ങളുടെ ഓവർലേയ്‌ഡ് ചെയ്യുമ്പോൾ അവയുടെ ക്രമം മാറ്റാൻ z-ഇൻഡക്സ് പ്രോപ്പർട്ടി നിങ്ങളെ അനുവദിക്കുന്നു. പ്രോപ്പർട്ടി അതിന്റെ മൂല്യമായി ഒരു നമ്പർ എടുക്കുന്നു. വലിയ z-ഇൻഡക്സ് മൂല്യമുള്ള ഘടകങ്ങൾ ചെറിയ z-ഇൻഡക്സ് മൂല്യമുള്ള മൂലകങ്ങളുടെ മുകളിൽ ദൃശ്യമാകും.

ഉദാഹരണത്തിന്:

ഇപ്പോൾ നമുക്ക് റെഡ്ബ്ലോക്ക് ബ്ലോക്ക് ശൈലിയിലേക്ക് ഒരു പുതിയ നിയമം ചേർക്കാം:

റെഡ്ബ്ലോക്ക് (z-ഇൻഡക്സ്: 100; സ്ഥാനം: കേവലം; മുകളിൽ: 20px; ഇടത്: 50px; വീതി: 80px; ഉയരം: 80px; പശ്ചാത്തല-നിറം: ചുവപ്പ്; )

ഇവിടെ z-ഇൻഡക്‌സ് 100 ആണ്. എന്നാൽ അത് 100 എന്ന സംഖ്യ ആയിരിക്കണമെന്നില്ല. രണ്ടാമത്തെ ബ്ലോക്കിന് നിർവചിക്കാത്ത z-ഇൻഡക്‌സ് ഉള്ളതിനാൽ യഥാർത്ഥത്തിൽ പൂജ്യം ആയതിനാൽ, redBlock-ന് നമുക്ക് z-ഇൻഡക്സ് പ്രോപ്പർട്ടി, അതിലും വലിയ ഏത് മൂല്യത്തിലും സജ്ജീകരിക്കാം. പൂജ്യം.

ഇപ്പോൾ ആദ്യത്തെ ബ്ലോക്ക് രണ്ടാമത്തേതിനെ ഓവർലാപ്പ് ചെയ്യും, തുടക്കത്തിൽ സംഭവിച്ചതുപോലെ തിരിച്ചും അല്ല.

ഈ ദിവസങ്ങളിൽ, വെബ് ഡെവലപ്പർമാർക്ക് വിവിധ CSS ടെക്നിക്കുകൾ ഉപയോഗിച്ച് സങ്കീർണ്ണമായ വെബ് പേജ് ലേഔട്ടുകൾ നിർമ്മിക്കാൻ കഴിയും. ഈ സാങ്കേതിക വിദ്യകളിൽ ചിലതിന് ഒരു നീണ്ട ചരിത്രമുണ്ട് (ഫ്ലോട്ടുകൾ), മറ്റുള്ളവ (ഫ്ലെക്സ്ബോക്സ്) സമീപ വർഷങ്ങളിൽ ജനപ്രീതി നേടിയിട്ടുണ്ട്.

ഈ ലേഖനത്തിൽ, CSS സ്ഥാനനിർണ്ണയത്തെക്കുറിച്ചുള്ള കുറച്ച് അറിയപ്പെടാത്ത കാര്യങ്ങൾ ഞങ്ങൾ സൂക്ഷ്മമായി പരിശോധിക്കും.

ആരംഭിക്കുന്നതിന് മുമ്പ്, വ്യത്യസ്ത തരം പൊസിഷനിംഗിന്റെ അടിസ്ഥാനകാര്യങ്ങൾ നമുക്ക് ഹ്രസ്വമായി അവലോകനം ചെയ്യാം.

ലഭ്യമായ പൊസിഷനിംഗ് രീതികളുടെ അവലോകനം

CSS പൊസിഷൻ പ്രോപ്പർട്ടി ഒരു മൂലകത്തിന്റെ പൊസിഷനിംഗ് തരം നിർണ്ണയിക്കുന്നു.

പൊസിഷനിംഗ് ഓപ്ഷനുകൾ

സ്റ്റാറ്റിക് എന്നത് ഡിഫോൾട്ട് പൊസിഷനിംഗ് പ്രോപ്പർട്ടി മൂല്യമാണ്. ഈ ഘടകം പൊസിഷനിംഗ് ഉപയോഗിക്കുന്നില്ലെന്ന് ഞങ്ങൾ ഉപദേശിക്കുന്നു - ഡിഫോൾട്ടല്ലാത്ത ഒരു പൊസിഷനിംഗ് തരം നിങ്ങൾ വ്യക്തമാക്കിയാൽ മാത്രമേ പൊസിഷനിംഗ് ബാധകമാകൂ.

ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾ ഇനിപ്പറയുന്ന മൂല്യങ്ങളിൽ ഒന്നിലേക്ക് പൊസിഷൻ പ്രോപ്പർട്ടി സജ്ജീകരിക്കേണ്ടതുണ്ട്:

• ബന്ധു
• കേവല
• നിശ്ചിത
• പശിമയുള്ള

പൊസിഷനിംഗ് സജ്ജീകരിച്ചതിനുശേഷം മാത്രമേ, മൂലകത്തെ ഓഫ്‌സെറ്റ് ചെയ്യുന്ന പ്രോപ്പർട്ടികൾ നിങ്ങൾക്ക് ഉപയോഗിക്കാൻ കഴിയൂ:

• ശരിയാണ്
• താഴെ
• ഈ പ്രോപ്പർട്ടികളുടെ പ്രാരംഭ മൂല്യം ഓട്ടോ കീവേഡ് ആണ്.

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

പ്രധാന സ്ഥാനനിർണ്ണയ രീതികൾ തമ്മിലുള്ള വ്യത്യാസങ്ങൾ

ഇപ്പോൾ ലഭ്യമായ പൊസിഷനിംഗ് തരങ്ങൾ തമ്മിലുള്ള മൂന്ന് അടിസ്ഥാന വ്യത്യാസങ്ങൾ നമുക്ക് പെട്ടെന്ന് നോക്കാം:

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

ഡെമോയിൽ നിങ്ങൾക്ക് ഇത് കൂടുതൽ വിശദമായി കാണാൻ കഴിയും:

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

കേവല പൊസിഷനിംഗ് തരത്തോടുകൂടിയ പൊസിഷനിംഗ് ഘടകങ്ങൾ

സമ്പൂർണ്ണ സ്ഥാനനിർണ്ണയം എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് മിക്ക ആളുകൾക്കും അറിയാമെന്ന് എനിക്ക് ഉറപ്പുണ്ട്. എന്നിരുന്നാലും, അതിനെക്കുറിച്ചുള്ള പല കാര്യങ്ങളും തുടക്കക്കാരെ ആശയക്കുഴപ്പത്തിലാക്കിയേക്കാം.

അതിനാൽ, സ്ഥാനനിർണ്ണയത്തിന്റെ കുറച്ച് അറിയപ്പെടുന്ന സവിശേഷതകൾ വിവരിക്കുമ്പോൾ അത് ആരംഭിക്കാൻ ഞാൻ തീരുമാനിച്ചു.

അതിനാൽ, തികച്ചും സ്ഥാനമുള്ള ഒരു മൂലകം അതിന്റെ ഏറ്റവും അടുത്ത സ്ഥാനമുള്ള പൂർവ്വികനെ അപേക്ഷിച്ച് ഓഫ്സെറ്റ് ചെയ്യുന്നു. തീർച്ചയായും, ഏതെങ്കിലും പൂർവ്വികർക്ക് സ്റ്റാറ്റിക് അല്ലാതെ മറ്റൊരു സ്ഥാനമുണ്ടെങ്കിൽ ഇത് പ്രവർത്തിക്കും - മൂലകത്തിന് സ്ഥാനമുള്ള പൂർവ്വികർ ഇല്ലെങ്കിൽ, അത് ദൃശ്യപരത മേഖലയുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ഓഫ്സെറ്റ് ചെയ്യുന്നു.

ഇനിപ്പറയുന്ന ഉദാഹരണത്തിലൂടെ ഇത് തെളിയിക്കുന്നു:

ഈ ഡെമോയിൽ, ഗ്രീൻ ബ്ലോക്ക് ആദ്യം പൂർണ്ണമായും പൂജ്യം പാഡിംഗ് അടിയിൽ: 0, ഇടത്: 0 എന്നിവയിൽ സ്ഥാപിച്ചിരിക്കുന്നു, അതിന്റെ പൂർവ്വികൻ (ചുവന്ന ബ്ലോക്ക്) ഒട്ടും സ്ഥാപിച്ചിട്ടില്ല.

എന്നിരുന്നാലും, ഞങ്ങൾ ബാഹ്യ റാപ്പർ (ക്ലാസ് ജംബോട്രോണുള്ള ഒരു ഘടകം) താരതമ്യേന സ്ഥാനം പിടിച്ചിട്ടുണ്ട്. അതിന്റെ പൂർവ്വികരുടെ പൊസിഷനിംഗ് തരം മാറുമ്പോൾ ഗ്രീൻ ബ്ലോക്കിന്റെ സ്ഥാനം മാറുന്നത് എങ്ങനെയെന്ന് ശ്രദ്ധിക്കുക.

തികച്ചും സ്ഥാനമുള്ള ഘടകങ്ങൾ ഫ്ലോട്ട് പ്രോപ്പർട്ടി അവഗണിക്കുന്നു

ഞങ്ങൾ ഒരു ഫ്ലോട്ടഡ് എലമെന്റിന് കേവലമോ സ്ഥിരമോ ആയ പൊസിഷനിംഗ് പ്രയോഗിച്ചാൽ, ഫ്ലോട്ട് പ്രോപ്പർട്ടി ഒന്നും അല്ല എന്ന് സജ്ജീകരിക്കും. മറുവശത്ത്, ഞങ്ങൾ ആപേക്ഷിക സ്ഥാനനിർണ്ണയം സജ്ജീകരിക്കുകയാണെങ്കിൽ, ഘടകം ഫ്ലോട്ടിംഗ് ആയി തുടരും.

അനുബന്ധ ഡെമോ നോക്കുക:

ഈ ഉദാഹരണത്തിൽ, വലതുവശത്തേക്ക് ഒഴുകുന്ന രണ്ട് വ്യത്യസ്ത ഘടകങ്ങൾ ഞങ്ങൾ നിർവ്വചിക്കുന്നു. ഒരു ചുവന്ന ബ്ലോക്ക് പൂർണ്ണമായും സ്ഥാനം പിടിക്കുമ്പോൾ, അത് ഫ്ലോട്ട് പ്രോപ്പർട്ടിയുടെ മൂല്യത്തെ അവഗണിക്കുന്നു, അതേസമയം താരതമ്യേന സ്ഥാനമുള്ള പച്ച ബ്ലോക്ക് ഫ്ലോട്ട് മൂല്യം നിലനിർത്തുന്നു.

തികച്ചും സ്ഥാനമുള്ള ഇൻലൈൻ ഘടകങ്ങൾ ബ്ലോക്ക് ഘടകങ്ങളായി മാറുന്നു

സമ്പൂർണ്ണ അല്ലെങ്കിൽ സ്ഥിരമായ സ്ഥാനനിർണ്ണയമുള്ള ഒരു ഇൻലൈൻ ഘടകം ഒരു ബ്ലോക്ക് മൂലകത്തിന്റെ ഗുണങ്ങൾ എടുക്കുന്നു. ഇൻലൈൻ ഘടകങ്ങളെ ബ്ലോക്ക് ഘടകങ്ങളിലേക്ക് പരിവർത്തനം ചെയ്യുന്നത് പട്ടികയിൽ കൂടുതൽ വിശദമായി വിവരിച്ചിരിക്കുന്നു.

ഈ സാഹചര്യത്തിൽ, ഞങ്ങൾ രണ്ട് വ്യത്യസ്ത ഘടകങ്ങൾ സൃഷ്ടിച്ചു. ആദ്യത്തേത് (പച്ച ബ്ലോക്ക്) ഒരു ബ്ലോക്ക് മൂലകമാണ്, രണ്ടാമത്തേത് (റെഡ് ബ്ലോക്ക്) ഒരു ഇൻലൈൻ മൂലകമാണ്. തുടക്കത്തിൽ, പച്ച ബ്ലോക്ക് മാത്രമേ ദൃശ്യമാകൂ.

റെഡ് ബോക്‌സ് ദൃശ്യമാകില്ല, കാരണം അതിന്റെ വീതിയും ഉയരവും ബ്ലോക്ക്, ഇൻലൈൻ-ബ്ലോക്ക് ഘടകങ്ങളുമായി മാത്രമേ പ്രവർത്തിക്കൂ, കൂടാതെ ഉള്ളടക്കം ഇല്ലാത്തതിനാൽ അതിന് അളവുകളൊന്നുമില്ല.

നിങ്ങൾ ഒരു ചുവന്ന ബ്ലോക്കിന് ഒരു സമ്പൂർണ്ണ അല്ലെങ്കിൽ നിശ്ചിത സ്ഥാനം നൽകുമ്പോൾ, അത് ഒരു ബ്ലോക്ക് ബ്ലോക്കായി മാറുകയും അതിൽ വ്യക്തമാക്കിയിരിക്കുന്ന ബ്ലോക്ക് വലുപ്പങ്ങൾ പ്രാബല്യത്തിൽ വരികയും ചെയ്യും.

തികച്ചും സ്ഥാനമുള്ള ഘടകങ്ങൾക്ക് പാഡിംഗ് തകർച്ചയില്ല

സ്ഥിരസ്ഥിതിയായി, രണ്ട് ലംബ മാർജിനുകൾ സ്പർശിക്കുമ്പോൾ, അവ അവയുടെ പരമാവധി തുല്യമായ ഒന്നായി സംയോജിപ്പിക്കുന്നു. ഇതിനെ മാർജിൻ തകർച്ച എന്ന് വിളിക്കുന്നു.

ഇവിടെ തികച്ചും സ്ഥാനമുള്ള മൂലകങ്ങളുടെ സ്വഭാവം ഫ്ലോട്ടിംഗ് മൂലകങ്ങൾക്ക് സമാനമാണ് - അവയുടെ പാഡിംഗ് അതിന്റെ അയൽക്കാരുമായി സംയോജിപ്പിച്ചിട്ടില്ല.

ഈ ഡെമോയിൽ, മൂലകത്തിന് 20 പിക്സലുകളുടെ പാഡിംഗ് നൽകിയിരിക്കുന്നു. പാരന്റ് എലമെന്റിന്റെ പാഡിംഗിനൊപ്പം അതിന്റെ പാഡിംഗ് തകരുന്നു, അതും 20 പിക്സലുകൾ. നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, കേവല സ്ഥാനനിർണ്ണയത്തിൽ മാത്രം തകർച്ചയില്ല.

എന്നാൽ അരികുകൾ തകരുന്നത് എങ്ങനെ തടയാം? അവയ്ക്കിടയിൽ ഒരുതരം സെപ്പറേറ്റർ സ്ഥാപിക്കേണ്ടതുണ്ട്.

ഇത് പാഡിംഗോ ബോർഡറോ ആകാം, മാതാപിതാക്കളുടെയും കുട്ടികളുടെയും ഘടകങ്ങളിൽ ഇത് പ്രയോഗിക്കാവുന്നതാണ്. പാരന്റ് എലമെന്റിലേക്ക് ഒരു ക്ലിയർഫിക്സ് ചേർക്കുക എന്നതാണ് മറ്റൊരു ഓപ്ഷൻ.

പിക്സലുകളും ശതമാനവും ഉള്ള മൂലകങ്ങളുടെ സ്ഥാനം

മൂലകങ്ങളുടെ സ്ഥാനം നിലനിർത്താൻ നിങ്ങൾ എപ്പോഴെങ്കിലും പിക്സലുകൾക്ക് പകരം ശതമാനം ഉപയോഗിച്ചിട്ടുണ്ടോ? ഉത്തരം അതെ എന്നാണെങ്കിൽ, ഒരു മൂലകത്തിന്റെ ഓഫ്‌സെറ്റ് തിരഞ്ഞെടുത്ത യൂണിറ്റുകളെ (പിക്സലുകൾ അല്ലെങ്കിൽ ശതമാനം) ആശ്രയിച്ചിരിക്കുന്നുവെന്ന് നിങ്ങൾക്കറിയാം.

ഇത് കുറച്ച് ആശയക്കുഴപ്പമുണ്ടാക്കുന്നു, അല്ലേ? അതിനാൽ ആദ്യം ശതമാനം ഓഫ്‌സെറ്റിനെക്കുറിച്ച് സ്പെസിഫിക്കേഷൻ എന്താണ് പറയുന്നതെന്ന് നോക്കാം:

പാരന്റ് ബ്ലോക്കിന്റെ വീതിയുടെ (ഇടത്തോട്ടും വലത്തോട്ടും) അല്ലെങ്കിൽ ഉയരത്തിന്റെ (മുകളിലോ താഴെയോ) ശതമാനമായി ഓഫ്‌സെറ്റ് ചെയ്യുക. ഒട്ടിച്ച മൂലകങ്ങൾക്ക്, ഓഫ്സെറ്റ് ഫ്ലോയുടെ വീതിയുടെ (ഇടത്തോട്ടും വലത്തോട്ടും) അല്ലെങ്കിൽ ഉയരം (മുകളിലോ താഴെയോ) ശതമാനമായി കണക്കാക്കുന്നു. നെഗറ്റീവ് മൂല്യങ്ങൾ സ്വീകാര്യമാണ്.

സൂചിപ്പിച്ചതുപോലെ, നിങ്ങൾ ഓഫ്‌സെറ്റ് ഒരു ശതമാനമായി സജ്ജീകരിക്കുമ്പോൾ, മൂലകത്തിന്റെ സ്ഥാനം അതിന്റെ മാതാപിതാക്കളുടെ വീതിയെയും ഉയരത്തെയും ആശ്രയിച്ചിരിക്കുന്നു.

ഡെമോ ഈ വ്യത്യാസം കാണിക്കുന്നു:

ഈ ഉദാഹരണം ഓഫ്‌സെറ്റിനായി പിക്സലുകളും ശതമാനങ്ങളും ഉപയോഗിക്കുന്നു. തീർച്ചയായും, നിങ്ങൾ പിക്സലുകളിൽ ഒരു ഓഫ്സെറ്റ് വ്യക്തമാക്കുമ്പോൾ, മൂലകം ആവശ്യമുള്ളിടത്തേക്ക് നീക്കും.

ഞങ്ങൾ ഓഫ്‌സെറ്റിനായി ഒരു ശതമാനം തിരഞ്ഞെടുക്കുകയാണെങ്കിൽ, ഫലം പാരന്റ് എലമെന്റിന്റെ വലുപ്പത്തെ ആശ്രയിച്ചിരിക്കും. പുതിയ സ്ഥാനം എങ്ങനെ കണക്കാക്കുന്നുവെന്ന് കാണിക്കുന്ന ഒരു ദൃശ്യവൽക്കരണം ഇതാ:

കുറിപ്പ്: നിങ്ങൾക്കറിയാവുന്നതുപോലെ, പരിവർത്തന പ്രോപ്പർട്ടി (വിവിധ വിവർത്തന പ്രവർത്തനങ്ങൾക്കൊപ്പം) ഒരു ഘടകത്തിന്റെ സ്ഥാനം മാറ്റാൻ നിങ്ങളെ അനുവദിക്കുന്നു. എന്നാൽ ഈ സാഹചര്യത്തിൽ, ശതമാനം ഉപയോഗിക്കുമ്പോൾ, കണക്കുകൂട്ടൽ മൂലകത്തിന്റെ വലുപ്പത്തെ അടിസ്ഥാനമാക്കിയുള്ളതായിരിക്കും, അല്ലാതെ അതിന്റെ പാരന്റ് അല്ല.

ഉപസംഹാരം

CSS-ലെ പൊസിഷനിംഗ് നന്നായി മനസ്സിലാക്കാനും ചില വെല്ലുവിളികൾ വ്യക്തമാക്കാനും ഈ ലേഖനം നിങ്ങളെ സഹായിച്ചിട്ടുണ്ടെന്ന് ഞാൻ പ്രതീക്ഷിക്കുന്നു.

3 ഫൗണ്ടേഷൻ ബ്ലോക്കുകൾ 300x600x2400 കുറഞ്ഞത് 3-5 മീറ്റർ നീക്കാൻ (വലിച്ചിടുക, തിരിയുക, മുതലായവ) അത്യാവശ്യമാണ്. അവർ വീടിന് പിന്നിൽ സ്ഥിതി ചെയ്യുന്നതാണ് പ്രശ്നം, ഒരു ക്രെയിൻ അല്ലെങ്കിൽ മറ്റ് പ്രത്യേക ഉപകരണങ്ങൾക്ക് പ്രവേശനമില്ല.
പിന്നീട് വരാന്ത നിർമ്മിക്കാൻ ബ്ലോക്കുകൾ ഉപയോഗിക്കാൻ ഞാൻ ആഗ്രഹിച്ചു. എന്നാൽ ഇപ്പോൾ എനിക്ക് അവർ കിടക്കുന്ന ഇടം ശൂന്യമാക്കേണ്ടതുണ്ട് - ഞാൻ അവിടെ ഒരു ഗസീബോ ആസൂത്രണം ചെയ്യുന്നു.
ഓരോന്നിന്റെയും ഭാരം (ഞാൻ ശരിയായി കണക്കാക്കിയാൽ) ഏകദേശം 1 ടൺ ആണ്. ഇതിനെക്കുറിച്ച് എന്തെങ്കിലും ചിന്തകളുണ്ടോ?

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

പി.എസ്. ഈ ബ്ലോക്കുകൾക്കായി ഞങ്ങൾ പ്രത്യേകം വാങ്ങിയ വിഞ്ച് വളരെയധികം സഹായിച്ചു. വിഞ്ചിന്റെ ഹുക്ക് വേലി പോസ്റ്റുകളിൽ കൊളുത്താം (നമ്മുടെത് നന്നായി പിടിച്ചിരിക്കുന്നു) കൂടാതെ പൈപ്പുകളിലൂടെ ബ്ലോക്കുകൾ ഈ പോസ്റ്റുകളിലേക്ക് വലിച്ചിടാൻ വിഞ്ച് ഉപയോഗിക്കാം. ബ്ലോക്കിന് 2 ലഗുകൾ ബലപ്പെടുത്തൽ ഉണ്ടായിരിക്കണം, അതിനാൽ വിഞ്ച് അവയുമായി ബന്ധിപ്പിച്ചിരിക്കുന്നു. ഇത് ഒരു ലിവർ ഉപയോഗിച്ച് തള്ളുന്നതിനേക്കാൾ എളുപ്പമാണ്, പക്ഷേ ഇതിന് കൂടുതൽ സമയമെടുക്കും കൂടാതെ വളരെയധികം പരിശ്രമവും ആവശ്യമാണ് - എല്ലാ സമയത്തും നിങ്ങൾ അടുത്ത പോസ്റ്റിലേക്ക് വിഞ്ച് വീണ്ടും ഹുക്ക് ചെയ്യേണ്ടതുണ്ട്.

പി.പി.എസ്. എനിക്ക് കഴിയുന്നത് പോലെ വിശദീകരിച്ചു. എന്തെങ്കിലും ഉണ്ടെങ്കിൽ - ക്ഷമിക്കണം.

ഒരു ബ്ലോക്ക് ബന്ധുവിനെ സ്ഥാപിക്കുമ്പോൾ, നിങ്ങൾ പ്രോപ്പർട്ടി സജ്ജീകരിക്കേണ്ടതുണ്ട് സ്ഥാനം:ബന്ധുസ്ഥാനചലന ഗുണങ്ങളും. ഈ കേസിലെ സ്ഥാനചലനം സംഭവിക്കുന്നത് "പാരന്റ്" മൂലകവുമായി (സമ്പൂർണ സ്ഥാനനിർണ്ണയം പോലെ) ആപേക്ഷികമല്ല, മറിച്ച് സാധാരണ ഒഴുക്കിലെ ബ്ലോക്കുമായി ബന്ധപ്പെട്ടതാണ്. ഒരു ഉദാഹരണത്തിലൂടെ ഇത് കൂടുതൽ വ്യക്തമാകും. നമുക്ക് മൂന്ന് ഡിവികളുള്ള ഒരു 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; )

പേജ് സ്ക്രോൾ ചെയ്യുമ്പോൾ "ബ്ലോക്ക്" എന്ന ഐഡന്റിഫയർ ഉള്ള ബ്ലോക്ക് നിലനിൽക്കും.

ഇന്നത്തേക്ക് അത്രയേ ഉള്ളൂ. അടുത്ത പാഠത്തിൽ, ബ്ലോക്കുകളുടെ ചില സവിശേഷതകളും അവയുടെ തരങ്ങളും നമുക്ക് പരിചയപ്പെടാം.

സ്റ്റാറ്റിക് ഒഴികെയുള്ള എല്ലാ സ്ഥാന ഘടകങ്ങളുമായും അവ പ്രവർത്തിക്കുന്നു.

സ്ഥാനനിർണ്ണയ ഉദാഹരണം.

ഘടകങ്ങൾക്ക് പരസ്പരം ഓവർലാപ്പ് ചെയ്യാൻ കഴിയും!

ബാക്കിയുള്ളവയ്ക്ക് മുകളിൽ ഒരു ഘടകം പ്രദർശിപ്പിക്കുന്നു!

പൊസിഷൻ പ്രോപ്പർട്ടിക്ക് 4 മൂല്യങ്ങളുണ്ട്: സ്ഥിരം, സ്ഥിരം, ആപേക്ഷികം, കേവലം. ഈ ഓരോ അർത്ഥങ്ങളും ഉപയോഗത്തിന്റെ ഒരു ഉദാഹരണം ഉപയോഗിച്ച് ചുവടെ പ്രദർശിപ്പിക്കും.

ഒരു പേജിലെ ഘടകങ്ങളുടെ എല്ലാത്തരം സ്ഥാനനിർണ്ണയങ്ങളും വിശദമായി പരിശോധിക്കുന്നതിന് മുമ്പ്, ഡോക്യുമെന്റ് ഫ്ലോ എന്താണെന്ന് ഞങ്ങൾ പരിഗണിക്കേണ്ടതുണ്ട്.

ഡോക്യുമെന്റ് ഫ്ലോ

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

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

സ്റ്റാറ്റിക് പൊസിഷനിംഗ്

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

സ്ഥിരമായി സ്ഥാനമുള്ള ഒരു ഘടകത്തിലേക്ക് മുകളിൽ, ഇടത്, വലത് അല്ലെങ്കിൽ താഴെ CSS പ്രോപ്പർട്ടികൾ പ്രയോഗിക്കുമ്പോൾ, അവ അവഗണിക്കപ്പെടും.

ആവശ്യമെങ്കിൽ, സ്റ്റാറ്റിക് മൂല്യം ഉപയോഗിച്ച് നിങ്ങൾക്ക് സ്റ്റൈൽ ഷീറ്റിൽ സ്റ്റാറ്റിക് പൊസിഷനിംഗ് സജ്ജമാക്കാൻ കഴിയും:

ആദ്യ ഖണ്ഡിക.

രണ്ടാം ഖണ്ഡിക.

ശ്രമിക്കുക »

നിശ്ചിത സ്ഥാനനിർണ്ണയം

ബ്രൗസർ വിൻഡോയുമായി ബന്ധപ്പെട്ട പേജിൽ നിശ്ചിത സ്ഥാനനിർണ്ണയമുള്ള ഘടകങ്ങൾ സ്ഥിതിചെയ്യുന്നു. അത്തരം ഘടകങ്ങൾ പൊതുവായ ഫ്ലോയിൽ നിന്ന് നീക്കംചെയ്യുന്നു; ഫ്ലോയിലെ സ്ഥിരമായ ഘടകത്തെ പിന്തുടരുന്ന ഘടകങ്ങൾ അതിനെ അവഗണിക്കുകയും വെബ് പേജിൽ അതിന്റെ സ്ഥാനം നേടുകയും ചെയ്യും.

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

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

ശ്രമിക്കുക »

ആപേക്ഷിക സ്ഥാനനിർണ്ണയം

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

അത്തരം മൂലകങ്ങൾ അവയെ ചുറ്റുമുള്ള മൂലകങ്ങളുടെ സ്ഥാനത്തെ ബാധിക്കില്ല; ശേഷിക്കുന്ന മൂലകങ്ങൾ അതേപടി നിലനിൽക്കുകയും താരതമ്യേന സ്ഥാനമുള്ള മൂലകത്താൽ ഓവർലാപ്പ് ചെയ്യുകയും ചെയ്യാം:

ആദ്യ ലെവൽ ശീർഷകം.

താരതമ്യേന സ്ഥാനമുള്ള തലക്കെട്ട്.

മൂന്നാം ലെവൽ തലക്കെട്ട്.

ശ്രമിക്കുക »

കുറിപ്പ്: ആപേക്ഷിക ഘടകങ്ങൾ സാധാരണയായി കേവല മൂലകങ്ങളുടെ പേരായി ഉപയോഗിക്കുന്നു.

സമ്പൂർണ്ണ സ്ഥാനനിർണ്ണയം

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

പൂർണ്ണമായി സ്ഥാനമുള്ള എല്ലാ ഘടകങ്ങളും ബ്രൗസർ വിൻഡോയുമായി ബന്ധപ്പെട്ടതോ അല്ലെങ്കിൽ സമ്പൂർണ്ണമോ സ്ഥിരമോ ആപേക്ഷികമോ ആയ സ്ഥാന സ്വത്ത് ഉള്ള ഏറ്റവും അടുത്തുള്ള സ്ഥാനമുള്ള പൂർവ്വികനോട് (ഒന്ന് ഉണ്ടെങ്കിൽ) ആപേക്ഷികമായി സ്ഥാപിച്ചിരിക്കുന്നു.

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

ശ്രമിക്കുക »

ഓവർലാപ്പിംഗ് ഘടകങ്ങൾ

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