സ്ഥാനം

ഒരു മൂലകത്തിന്റെ സ്ഥാനം വേഗത്തിൽ ക്രമീകരിക്കുന്നതിന് ഈ ഷോർട്ട്ഹാൻഡ് യൂട്ടിലിറ്റികൾ ഉപയോഗിക്കുക.

പൊതുവായ മൂല്യങ്ങൾ

ദ്രുത പൊസിഷനിംഗ് ക്ലാസുകൾ ലഭ്യമാണ്, അവ പ്രതികരിക്കുന്നില്ലെങ്കിലും.

<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-topCSS-കൾ യൂട്ടിലിറ്റി ഉപയോഗിക്കുന്നു .position: sticky

IE11 ഉം IE10 ഉം position: stickyആയി റെൻഡർ ചെയ്യും position: relative. അതുപോലെ, @supportsശരിയായ രീതിയിൽ റെൻഡർ ചെയ്യാൻ കഴിയുന്ന ബ്രൗസറുകളിലേക്ക് മാത്രം ഒട്ടിപ്പിടിക്കൽ പരിമിതപ്പെടുത്തിക്കൊണ്ട് ഞങ്ങൾ ഒരു അന്വേഷണത്തിൽ ശൈലികൾ പൊതിയുന്നു.

<div class="sticky-top">...</div>