position kontroliuoja, kaip elementas yra išdėstytas ir ar taikomos offset savybės (top/right/bottom/left).
css
{ : static; }
{ : relative; }
{ : absolute; }
{ : fixed; }
{ : sticky; }
position kontroliuoja, kaip elementas yra išdėstytas ir ar taikomos offset savybės (top/right/bottom/left).
{ : static; }
{ : relative; }
{ : absolute; }
{ : fixed; }
{ : sticky; }
absolute padeda elementą santykiškai jo artimiausiam pozicionuotam protėviui (bet kuriame kitame nei static). Todėl nustatysite position: relative tėviniam elementui, kad jis būtų atskaitos tašku:
.card {
position: relative; /* becomes the positioning context */
}
.badge {
position: absolute; /* positioned relative to .card */
top: 8px;
right: 8px; /* pins the badge to the card's top-right corner */
}
Šis relative-parent / absolute-child šablonas yra visur: žymos, išsiskleidžiančios sistemos, paskutiniai patarimai, uždarymo mygtukai.
.navbar { position: fixed; top: 0; } /* stays put on screen while scrolling */
.section-header { position: sticky; top: 0; } /* scrolls with content, then sticks at top */
top: 0), tada lieka ten, kol matomas jos konteineris — puiku skyriaus antraštėms.absolute/fixed elementai pašalinti iš normalaus srauto, todėl jie nepasiima vietos — seseriniai elementai elgiasi lyg jų nebūtų, kas gali sukelti sutapimą. Planuokite tai (pvz. pridėkite padding, kad kompensuotumėte fiksuotą navbar).
position yra būtinas perdangoms, klijantems antraštėms, modalams, išsiskleidžiančioms sistemoms ir žymoms.
Relative-parent/absolute-child santykis ir fixed-vs-sticky skirtumas yra praktinis pagrindas, kurį jūs naudojate nuolat.