വെറും X, Y കോർഡിനേറ്റേക്കാൾ കൂടുതൽ, CSS Positioning ആണ്
വെബ്സൈറ്റ് ലേഔട്ടുകൾ സൃഷ്ടിക്കുന്നതിനുള്ള പ്രധാന ഭാഗമാണ് CSS സ്ഥാനം. ഫ്ളെക്സ്ബോക്സ്, സിഎസ്എസ് ഗ്രിഡ് തുടങ്ങിയ പുതിയ സിഎസ്എസ് ലെയറുകളുടെ ടെക്നോളജിയും കൂടി, വെബ് ഡിസൈനറുകളുടെ ബാഗ് തന്ത്രങ്ങളിൽ ഇപ്പോഴും സ്ഥാനം നിലനിർത്തുന്നു.
സി.എസ്.എസ്. പൊസിഷനി ഉപയോഗിക്കുമ്പോൾ, നിങ്ങൾ ആദ്യം ചെയ്യേണ്ട കാര്യം, തന്നിരിക്കുന്ന എലമെൻറിനായി പൂർണ്ണമോ അല്ലെങ്കിൽ ആപേക്ഷികമായ സ്ഥാനമോ ഉപയോഗിക്കാനാഗ്രഹിക്കുന്നെങ്കിൽ ബ്രൌസറിനോട് പറയുന്നതിന് സി.എസ്.എസ്. ഈ രണ്ടു പൊസിഷനിംഗ് വസ്തുതകൾ തമ്മിലുള്ള വ്യത്യാസം നിങ്ങൾ വ്യക്തമായി മനസ്സിലാക്കേണ്ടതുണ്ട്.
വെബ് ഡിസൈനിൽ ഉപയോഗിക്കുന്നത് കേവലം രണ്ട് ബന്ധുത്വ നിലകളാണ് കേവലവും ബന്ധുക്കളും.
- സ്റ്റാറ്റിക്ക്
- കേവലമായ
- ബന്ധു
- നിശ്ചിത
വെബ് പേജിലെ ഏത് ഘടകത്തിനായും സ്ഥിരസ്ഥിതിയാണ് സ്റ്റാറ്റിക്. നിങ്ങൾ ഒരു ഘടകത്തിന്റെ സ്ഥാനം നിർവചിക്കുന്നില്ലെങ്കിൽ, അത് സ്റ്റാറ്റിക് ആയിരിക്കും. ഇത് എച്ച്എഎൽ ഡോക്യുമെന്റിൽ എവിടെയാണെന്നും അത് ആ ഡോക്യുമെന്റിന്റെ സാധാരണ ഒഴുക്കിനുള്ളിൽ എങ്ങനെ പ്രദർശിപ്പിക്കുമെന്നതിനെ അടിസ്ഥാനമാക്കി സ്ക്രീനിൽ പ്രദർശിപ്പിക്കുമെന്നാണ് ഇതിനർത്ഥം.
മുകളിൽ സ്ഥാനത്തിലോ സ്റ്റാറ്റിക് പോസിറ്റീവ് ആയ ഒരു ഘടകത്തിലേയ്ക്ക് ഇടതുവശത്തേക്കോ പോണ്ടിംഗ് റൂൾ പ്രയോഗിക്കുകയാണെങ്കിൽ ആ നിയമങ്ങൾ അവഗണിക്കപ്പെടും, കൂടാതെ സാധാരണ രേഖയിൽ ഒഴുകുന്ന ഘടകം നിലനിൽക്കും. സത്യത്തിൽ, നിങ്ങൾ ഒരിക്കലും അപൂർവ്വമായി, എപ്പോഴെങ്കിലും, CSS- ൽ സ്റ്റാറ്റിക് സ്ഥാനത്തേക്ക് ഒരു ഘടകം സജ്ജീകരിക്കേണ്ടിവരും, കാരണം ഇത് സ്ഥിരസ്ഥിതി മൂല്യമാണ്.
പൂർണ്ണമായ CSS സ്ഥാനനിർണ്ണയം
പൂർണ്ണമായും മനസ്സിലാക്കാനുള്ള ഏറ്റവും ലളിതമായ CSS സ്ഥാനമാണ് അബ്സലോട്ട് പൊസിഷനിങ്. നിങ്ങൾ ഈ CSS സ്ഥാന ഏരിയയിൽ ആരംഭിക്കുന്നു:
സ്ഥാനം: കേവലമായ;ഈ മൂല്യം ബ്രൌസറിനോട് ആവശ്യപ്പെടാൻ പോകുന്നത് എന്താണെന്നത്, സാധാരണ രേഖയിൽ നിന്ന് നീക്കം ചെയ്യേണ്ടതാണ്, പകരം പേജിൽ ഒരു കൃത്യമായ സ്ഥാനത്ത് സ്ഥാപിക്കുന്നു. ഇത് ആ മൂലകത്തിലെ ഏറ്റവും സ്ഥായിയായ സ്റ്റാറ്റിസ്റ്റിക്കൽ സ്ഥാനത്തെ മുൻപുള്ള പൂർവ്വപദത്തെ അടിസ്ഥാനമാക്കിയാണ് കണക്കാക്കുന്നത്.
ഒരു പൂർണ്ണമായും സ്ഥാന നിർണ്ണയിക്കപ്പെട്ട ഒരു മൂലകമാണ് സാധാരണ സാധാരണ പ്രവാഹത്തിൽ നിന്നും എടുത്തത് എന്നതിനാൽ, ഇതിന് മുമ്പുള്ള അല്ലെങ്കിൽ അതിനു ശേഷമുള്ള ഘടകങ്ങൾ എങ്ങനെയാണ് വെബ് പേജിൽ സ്ഥാനം നൽകുന്നത് എന്നതിനെ ബാധിക്കുകയില്ല.
ഒരു ഉദാഹരണം - നിങ്ങളുടെ ബന്ധുവിന്റെ മൂല്യം ഉപയോഗിച്ച് ഒരു വിഭജനം ഉണ്ടെങ്കിൽ (നമ്മൾ ഈ മൂല്യത്തെ ഉടൻ നോക്കിക്കൊള്ളാം), ആ ഡിവിഷൻ ഉള്ളിൽ നിങ്ങൾ ഒരു ഖണ്ഡികയുണ്ടാകും, ഡിവിഷനിലെ മുകളിൽ നിന്ന് 50 പിക്സലുകൾ ഈ ഖണ്ഡികയിലേക്ക് "absolute" ന്റെ ഒരു നിശ്ചിത മൂല്യം, "top" പ്രോപ്പർട്ടിയിൽ 50px ഓഫ്സെറ്റ് മൂല്യവും ചേർക്കും.
സ്ഥാനം: കേവലമായ; മുകളിൽ: 50px;ഈ പൂർണ്ണമായും നിർവചിച്ചിരിക്കുന്ന ഘടകം തുടർന്ന് താരതമ്യേന സ്ഥാനഭേദപ്പെടുത്തിയ ഡിവിഷൻ മുകളിൽ നിന്ന് 50 പിക്സലുകൾ പ്രദർശിപ്പിക്കും - സാധാരണ ഒഴുക്കിൽ മറ്റെന്തെങ്കിലും പ്രദർശനമുണ്ടായാലും. നിങ്ങളുടെ "പൂർണ്ണമായും" ഘടകം മൂലകമാണ് താരതമ്യേന സ്ഥാനചിഹ്നമായി അതിന്റെ സന്ദർഭമായി ഉപയോഗിക്കുകയും നിങ്ങൾ ഉപയോഗിക്കുന്ന പേസിംഗ് മൂല്യം അത് ആവർത്തിക്കുകയും ചെയ്യുന്നു.
നിങ്ങൾക്ക് ഉപയോഗിക്കാൻ കഴിയുന്ന നാലു സംവിധാനങ്ങൾ ഇവയാണ്:
- മുകളിൽ
- ശരി
- താഴെ
- ഇടത്തെ
നിങ്ങൾക്ക് ഒന്നോ അതിലധികമോ ഉപയോഗിക്കാം (ഈ രണ്ട് മൂല്യങ്ങൾക്കനുസരിച്ചും ഒരു ഘടകം സ്ഥാപിക്കാനാകില്ല) കൂടാതെ വലത് അല്ലെങ്കിൽ ഇടത് എന്നിവയും ഉപയോഗിക്കാം.
ഒരു എലമെന്റ് പൂർണ്ണമായ ഒരു സ്ഥാനത്തേക്ക് സജ്ജമാക്കിയിട്ടുണ്ടെങ്കിലും അത് സ്റ്റാറ്റിസ്റ്റിക്കായി നിശ്ചയിക്കാത്ത പൂർവികരോടുകൂടിയതായിരിക്കില്ല, തുടർന്ന് അത് ശരീരത്തിലെ ഘടകവുമായി ബന്ധപ്പെടുത്തിയിരിക്കും, അത് പേജിന്റെ ഉയർന്ന ലെവൽ ഘടകമാണ്.
ആപേക്ഷികമായ പൊസിഷനിംഗ്
ഞങ്ങൾ ഇതിനകം ആപേക്ഷിക പൊസിഷനിൽ പറഞ്ഞതുപോലെ, ഇപ്പോൾ ആ വസ്തുവിനെ നോക്കാം.
ആപേക്ഷിക സ്ഥാനനിർണ്ണയം പൂർണ്ണമായും ഒരേ നാലു സ്ഥാനനിർണ്ണയ സംവിധാനങ്ങളെയാണ് ഉപയോഗപ്പെടുത്തുന്നത്, പക്ഷേ, ഏറ്റവും കൃത്യമായ സ്റ്റാറ്റിക് സ്ഥാനമുള്ള പക്വതയുടേതുമായി ബന്ധമുള്ള മൂലകത്തിന്റെ സ്ഥാനത്തെ അടിസ്ഥാനപ്പെടുത്തുന്നതിനുപകരം, സാധാരണ പ്രവണതയിൽ തുടർന്നാൽ ഈ ഘടകം എവിടെ നിന്ന് തുടങ്ങും.
ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് നിങ്ങളുടെ വെബ് പേജിൽ മൂന്ന് ഖണ്ഡികകൾ ഉണ്ടെങ്കിൽ, മൂന്നിൽ ഒരു "സ്ഥാനം: ബന്ധു" രീതി ഉണ്ടെങ്കിൽ, അത് നിലവിലെ സ്ഥാനത്തെ അടിസ്ഥാനമാക്കി ഓഫ്സെറ്റ് സജ്ജമാക്കും.
ഖണ്ഡിക 2.
ഖണ്ഡിക 3.
മുകളിൽ പറഞ്ഞിരിക്കുന്ന ഉദാഹരണത്തിൽ, മൂന്നാം ഖണ്ഡിക കണ്ടെയ്നർ മൂലകത്തിന്റെ ഇടതു ഭാഗത്തുനിന്ന് 2 ഇമം നിലകൊള്ളും, പക്ഷേ ഇപ്പോഴും ആദ്യത്തെ രണ്ട് ഖണ്ഡികകൾ താഴെ വരും. ഇത് രേഖയുടെ സാധാരണ പ്രവാഹത്തിൽ നിലകൊള്ളുകയും, അല്പം ഓഫ്സെറ്റ് ആകുകയും ചെയ്യും. നിങ്ങൾ അതിനെ സ്ഥാനത്തേക്ക് മാറ്റിയാൽ: പൂർണ്ണമായും; അതിനെ പിന്തുടരുന്നതെന്തും അതിന്റെ മുകളിലായിരിക്കും പ്രദർശിപ്പിക്കുന്നത്, കാരണം അത് പ്രമാണത്തിന്റെ പതിവ് ഒഴുക്കില്ല.
ഒരു വെബ് പേജിലെ ഘടകങ്ങൾ മിക്കപ്പോഴും സ്ഥാനത്തിന്റെ മൂല്യം സജ്ജമാക്കാൻ ഉപയോഗിക്കും: ഓഫ്സെറ്റ് മൂല്ല്യം ഇല്ലാതെ ബന്ധുമില്ലാതെയാണ് ഇത് പ്രവർത്തിക്കുന്നത്, അതിനർത്ഥം ആ ഘടകം അവിടെ കൃത്യമായി എവിടെയാണെന്ന് സ്ഥിരീകരിക്കുന്നു എന്നാണ്. മറ്റ് മൂലകങ്ങളെ കൃത്യമായി സ്ഥാനപ്പെടുത്തുന്നതിന് ഉതകുന്ന ഒരു പശ്ചാത്തലമായി ആ ഘടകം നിലനിർത്തുന്നതിന് ഇത് ചെയ്യുന്നത് മാത്രമാണ്. ഉദാഹരണത്തിന്, നിങ്ങളുടെ മുഴുവൻ വെബ്സൈറ്റിനും "കണ്ടെയ്നർ" എന്ന ഒരു ക്ലാസ് മൂല്യം (വെബ് രൂപകൽപ്പനയിലെ ഒരു സാധാരണ കാഴ്ചപ്പാടോടെ) ചുറ്റിയുള്ള ഒരു വിഭജനം ഉണ്ടെങ്കിൽ ആ വിഭജനത്തെ ബന്ധുത്വ സ്ഥാനമായി സജ്ജമാക്കാൻ കഴിയും, അതിലൂടെ അതിനുള്ളിൽ എന്തെങ്കിലുമുണ്ടെങ്കിൽ ഇത് ഒരു പൊരുത്തക്കേട്.
നിശ്ചിത സ്ഥാനത്തെക്കുറിച്ച് എന്താണ്?
നിശ്ചിത സ്ഥാനനിർണ്ണയം എന്നത് തികച്ചും പൊരുത്തമുള്ള സ്ഥാനം പോലെയാണ്. മൂലകത്തിന്റെ സ്ഥാനം ആബ്സ്യൂട്ട് മോഡൽ പോലെ തന്നെ കണക്കുകൂട്ടുന്നു, പക്ഷേ നിശ്ചിത ഘടകങ്ങൾ ആ സ്ഥാനത്ത് നിശ്ചയിക്കുന്നു- വാട്ടർമാർക്ക് പോലെ. പേജിലെ മറ്റേതെങ്കിലും ആ ഘടകം കഴിഞ്ഞതിനു ശേഷം സ്ക്രോൾ ചെയ്യും.
ഈ പ്രോപ്പർട്ടി മൂല്യം ഉപയോഗിക്കാൻ, നിങ്ങൾ സജ്ജമാക്കും:
സ്ഥാനം: ഫിക്സഡ്;മനസ്സിൽ സൂക്ഷിക്കുക, നിങ്ങളുടെ സൈറ്റിൽ സ്ഥാനത്ത് ഒരു ഘടകം ഉറപ്പിക്കുമ്പോൾ, നിങ്ങളുടെ വെബ് പേജ് പ്രിന്റ് ചെയ്തപ്പോൾ അത് ആ സ്ഥാനത്ത് അച്ചടിക്കും. ഉദാഹരണത്തിന്, നിങ്ങളുടെ പേജിന്റെ മുകളിൽ നിങ്ങളുടെ ഘടകം സ്ഥിരീകരിച്ചിട്ടുണ്ടെങ്കിൽ, അത് എല്ലാ അച്ചടിച്ച പേജിന്റേയും മുകളിലായി കാണപ്പെടും - അത് പേജിന്റെ മുകൾഭാഗത്ത് സ്ഥിരീകരിച്ചിരിക്കുന്നതിനാൽ. അച്ചടിച്ച പേജുകൾ നിശ്ചിത ഘടകങ്ങൾ എങ്ങനെ പ്രദർശിപ്പിക്കാമെന്നത് മാറ്റാൻ നിങ്ങൾക്ക് മീഡിയ തരങ്ങൾ ഉപയോഗിക്കാം:
@media സ്ക്രീൻ {h1 # ആദ്യ {position: fixed; }} @ media പ്രിന്റ് {h1 # ആദ്യ {position: static; }}ജെന്നിഫർ ക്രിയിൻ എഴുതിയ ലേഖനം എഡിറ്റു ചെയ്തത് ജെറമി ഗിർാർഡ് 1/7/16.