𝗖𝗦𝗦 𝗣𝗼𝘀𝗶𝘁𝗶𝗼𝗻 𝗣𝗿𝗼𝗽𝗲𝗿𝘁𝗶𝗲𝘀
ഒരു പേജിൽ ഒരു എലമെന്റ് എവിടെ വരണം എന്ന് തീരുമാനിക്കുന്നത് CSS position property ആണ്. അവയെ നീക്കാൻ top, right, bottom, left എന്നിവ ഉപയോഗിക്കാം.
പ്രധാനമായും അഞ്ച് തരം പൊസിഷനിംഗുകൾ ഉണ്ട്.
Static ഇതാണ് ഡിഫോൾട്ട് സെറ്റിംഗ്. എലമെന്റുകൾ പേജിന്റെ സാധാരണ ക്രമം പിന്തുടരുന്നു. ഇവിടെ top അല്ലെങ്കിൽ left പ്രോപ്പർട്ടികൾ ഉപയോഗിക്കുന്നത് കൊണ്ട് മാറ്റമൊന്നും സംഭവിക്കില്ല.
Relative ഇത് ഒരു എലമെന്റിനെ അതിന്റെ യഥാർത്ഥ സ്ഥാനത്ത് നിന്ന് മാറ്റുന്നു. നിങ്ങൾ top-ൽ 20px കൂട്ടിയാൽ, എലമെന്റ് താഴേക്ക് നീങ്ങും. മറ്റ് എലമെന്റുകൾ അവയുടെ യഥാർത്ഥ സ്ഥാനങ്ങളിൽ തന്നെ തുടരും, അവ ആ വിടവ് നികത്തില്ല.
Absolute ഇത് ഒരു എലമെന്റിനെ പേജിന്റെ സാധാരണ ഫ്ലോയിൽ (flow) നിന്ന് മാറ്റുന്നു. അതിന്റെ ഏറ്റവും അടുത്തുള്ള പൊസിഷൻ ചെയ്ത ആങ്കസ്റ്റർ (ancestor) അടിസ്ഥാനമാക്കിയാണ് ഇത് സ്ഥാനം കണ്ടെത്തുന്നത്.
Fixed, Sticky എന്നിവയാണ് മറ്റ് തരങ്ങൾ. സ്ക്രോൾ ചെയ്യുമ്പോഴും Fixed എലമെന്റുകൾ ഒരേ സ്ഥാനത്ത് തന്നെ നിൽക്കുന്നു. Sticky എലമെന്റുകൾ ഒരു നിശ്ചിത പോയിന്റിൽ എത്തുന്നതുവരെ Relative എലമെന്റുകളെപ്പോലെ പ്രവർത്തിക്കുന്നു, അതിനുശേഷം അവ Fixed ആയി മാറുന്നു.
ഈ പ്രോപ്പർട്ടികളെക്കുറിച്ച് കൂടുതൽ ഇവിടെ പഠിക്കാം.
Source: https://dev.to/kavin_loyola_660466e5ea96/css-position-properties-23o8