സ്ഥാനം
ഒരു മൂലകത്തിന്റെ സ്ഥാനം വേഗത്തിൽ ക്രമീകരിക്കുന്നതിന് ഈ ഷോർട്ട്ഹാൻഡ് യൂട്ടിലിറ്റികൾ ഉപയോഗിക്കുക.
പൊതുവായ മൂല്യങ്ങൾ
ദ്രുത പൊസിഷനിംഗ് ക്ലാസുകൾ ലഭ്യമാണ്, അവ പ്രതികരിക്കുന്നില്ലെങ്കിലും.
<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
ഫിക്സഡ് ടോപ്പ്
വ്യൂപോർട്ടിന്റെ മുകളിൽ, അരികിൽ നിന്ന് അരികിലേക്ക് ഒരു ഘടകം സ്ഥാപിക്കുക. നിങ്ങളുടെ പ്രോജക്റ്റിലെ സ്ഥിരമായ സ്ഥാനത്തിന്റെ അനന്തരഫലങ്ങൾ നിങ്ങൾ മനസ്സിലാക്കുന്നുവെന്ന് ഉറപ്പാക്കുക; നിങ്ങൾക്ക് അധിക CSS ചേർക്കേണ്ടി വന്നേക്കാം.
<div class="fixed-top">...</div>
അടിവശം ഉറപ്പിച്ചു
വ്യൂപോർട്ടിന്റെ അടിയിൽ, അരികിൽ നിന്ന് അരികിലേക്ക് ഒരു ഘടകം സ്ഥാപിക്കുക. നിങ്ങളുടെ പ്രോജക്റ്റിലെ സ്ഥിരമായ സ്ഥാനത്തിന്റെ അനന്തരഫലങ്ങൾ നിങ്ങൾ മനസ്സിലാക്കുന്നുവെന്ന് ഉറപ്പാക്കുക; നിങ്ങൾക്ക് അധിക CSS ചേർക്കേണ്ടി വന്നേക്കാം.
<div class="fixed-bottom">...</div>
ഒട്ടിപ്പിടിച്ച മുകൾഭാഗം
വ്യൂപോർട്ടിന്റെ മുകളിൽ, അരികിൽ നിന്ന് അരികിലേക്ക് ഒരു ഘടകം സ്ഥാപിക്കുക, എന്നാൽ നിങ്ങൾ അത് സ്ക്രോൾ ചെയ്തതിന് ശേഷം മാത്രം. എല്ലാ ബ്രൗസറുകളിലും പൂർണ്ണമായി പിന്തുണയ്ക്കാത്ത .sticky-top
CSS-കൾ യൂട്ടിലിറ്റി ഉപയോഗിക്കുന്നു .position: sticky
IE11 ഉം IE10 ഉം position: sticky
ആയി റെൻഡർ ചെയ്യും position: relative
. അതുപോലെ, @supports
ശരിയായ രീതിയിൽ റെൻഡർ ചെയ്യാൻ കഴിയുന്ന ബ്രൗസറുകളിലേക്ക് മാത്രം ഒട്ടിപ്പിടിക്കൽ പരിമിതപ്പെടുത്തിക്കൊണ്ട് ഞങ്ങൾ ഒരു അന്വേഷണത്തിൽ ശൈലികൾ പൊതിയുന്നു.
<div class="sticky-top">...</div>