CSS positioning Malayalam

സി എസ് എസ് പൊസിഷനിംഗ് മലയാളം

സി എസ് എസ് ഉപയോഗിച്ചുള്ള ഡിസൈൻ പഠിക്കുമ്പോൾ, ഏറ്റവും പ്രാധാന്യം ഉള്ള ഒരു ടോപ്പിക്ക് ആണ് സി എസ് എസ്  പൊസിഷനിംഗ്.
ഇത് ശരിയായി മനസിലാക്കി എടുക്കാൻ അൽപ്പം പ്രയാസമാണ്. പക്ഷെ വളരെ പ്രധാനം ഉള്ളതായതുകൊണ്ട് ഇത് ഒഴിവാക്കാൻ പറ്റുകയുമില്ല.

പൊസിഷൻ പ്രോപ്പർട്ടിക്ക് 5 വിലകൾ ആണ് നൽകൽ സാധിക്കുന്നത്:

1. static
2. sticky
3. fixed
4. absolute
5. relative

ഇതിൽ ഏറ്റവും പ്രധാനം ആയി മനസിലാക്കേണ്ടത് എന്തിനെ ആശ്രയിച്ചാണ് പൊസിഷൻ ചേഞ്ച് ചെയ്യുന്നത് എന്നതാണ്. അതായത് നമ്മൾ left:30px; എന്ന് പറയുമ്പോൾ എവിടെ നിന്നാണ് ഈ 30px അളക്കുന്നത് എന്നുള്ളത്.

മനസിലാക്കി എടുക്കാൻ അൽപ്പം പ്രയാസമുള്ളത് absolute ഉം relative ഉം ആണ്. ബാക്കി ഉള്ളത് എല്ലാം വളരെ എളുപ്പത്തിൽ മനസിലാക്കാൻ സാധിക്കും.

Static Positioning

Default ആയിട്ടുള്ള പൊസിഷനിംഗ് ആണ് ഇത്. ഈ വാല്യൂ നമ്മൾ ഉപയോഗിച്ചാലും ഇല്ലെങ്കിലും, design ഇൽ  ഒരു മാറ്റവും സത്യത്തിൽ വരില്ല. html മാത്രം ഉപയോഗിച്ചാൽ ഉള്ള അതെ രീതിയിൽ, ആയിരിക്കും content ഡിസ്പ്ലേ ആകുന്നത്.

Sticky Positioning

സ്ക്രോൽ ചെയ്തു വരുമ്പോൾ ആണ് ഇതിന്റെ effect മനസിലാക്കാൻ സാധിക്കുന്നത്. സ്ക്രോൾ ചെയ്യുന്നതിനനുസരിച്ച് fixed & relative പൊസിഷനിംഗ് ഇതിനു ചെയ്യാൻ സാധിക്കും.

Fixed positioning

മൊത്തത്തിൽ മുഴുവൻ ബ്രോസർ വിന്ഡോയെ അടിസ്ഥാനമാക്കി ആണ് ഈ പൊസിഷനിംഗ്. ഉദാഹരണത്തിന് ഒരു DIV നു position:fixed; right:0px; bottom:0px; എന്ന് കൊടുത്താൽ ആ DIV വെബ്സൈറ്റിന്റെ വലത്തേ അറ്റത് താഴെ ഇരിക്കും.

Absolute positioning

പൊസിഷൻ ചെയ്യുന്ന Element, ഏത് Element (പേരെന്റ്  Element പൊസിഷൻ ചെയ്തിട്ടുള്ളതാകണം )ഇന്റെ ഉള്ളിലാണോ അതിനെ അടിസ്ഥാനമാക്കിയാവും പോസിഷൻ ആകുന്നത്.

Relative positioning

പൊസിഷൻ ചെയ്യുന്നതിന് മുൻപ് ഏത് സ്ഥാനത്താണോ ഇരുന്നത് ആയ സ്ഥാനത്തെ അടിസ്ഥാനമാക്കി നീങ്ങും. ഉദാഹരണം left:3px; എന്ന് പറയുമ്പോൾ അത് ഇരുന്ന സ്ഥാനത്തുനിന്നും മൂന്നു പിക്സൽ ഇടത്തോട്ട് നീങ്ങും.