స్థానం

మూలకం యొక్క స్థానాన్ని త్వరగా కాన్ఫిగర్ చేయడానికి ఈ షార్ట్‌హ్యాండ్ యుటిలిటీలను ఉపయోగించండి.

సాధారణ విలువలు

త్వరిత స్థాన తరగతులు అందుబాటులో ఉన్నాయి, అయినప్పటికీ అవి ప్రతిస్పందించవు.

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