பதவி

ஒரு தனிமத்தின் நிலையை விரைவாக உள்ளமைக்க இந்த சுருக்கெழுத்து பயன்பாடுகளைப் பயன்படுத்தவும்.

பொதுவான மதிப்புகள்

விரைவு நிலைப்படுத்தல் வகுப்புகள் உள்ளன, இருப்பினும் அவை பதிலளிக்கவில்லை.

<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>