Nostāja - CSS-triki | CSS almanahs 2025

positionĪpašumu var palīdzēt jums manipulēt vietu elementa, piemēram:

.element ( position: relative; top: 20px; )

Salīdzinot ar sākotnējo pozīciju, iepriekš minētais elements no augšas tagad tiks nobīdīts par 20 pikseļiem. Ja mēs animētu šīs īpašības, mēs varam redzēt, cik lielu kontroli tas mums dod (lai gan veiktspējas dēļ tā nav laba ideja):

relativeir tikai viena no sešām positionīpašuma vērtībām . Šeit ir pārējie:

Vērtības

static: katram elementam pēc noklusējuma ir statiska pozīcija, tāpēc elements pieturēsies pie parastās lapas plūsmas. Tātad, ja ir iestatīts kreisais / labais / augšējais / apakšējais / z-indekss, tad šis elements neietekmēs.
relative: elementa sākotnējā pozīcija dokumenta plūsmā paliek tāpat kā staticvērtība. Bet tagad kreisais / labais / augšējais / apakšējais / z-indekss darbosies. Pozicionālās īpašības “nobīda” elementu no sākotnējās pozīcijas šajā virzienā.
absolute: elements tiek noņemts no dokumenta plūsmas, un citi elementi rīkosies tā, it kā tā pat nebūtu, kamēr visas pārējās pozicionālās īpašības darbosies ar to.
fixed: elements tiek noņemts no dokumenta plūsmas kā absolūti novietoti elementi. Patiesībā viņi izturas gandrīz vienādi, tikai fiksēti izvietotie elementi vienmēr ir saistīti ar dokumentu, nevis ar kādu konkrētu vecāku, un ritināšana tos neietekmē.
sticky(eksperimentāls): elements tiek apstrādāts kā relativevērtība, līdz skatu vietas ritināšanas vieta sasniedz noteikto slieksni, un tajā brīdī elements ieņem fixedpozīciju, kurā viņam tiek likts pielīmēt.
inherit: positionvērtība netiek kaskādēta, tāpēc to var izmantot, lai to īpaši piespiestu, un inheritpozicionēšanas vērtību no tā vecākiem.

Absolūts

Ja bērna elementam ir absolutevērtība, vecāka elements rīkosies tā, it kā bērna vispār nebūtu:

.element ( position: absolute; )

Un, kad mēs cenšamies noteikt citas vērtības, piemēram left, bottomun rightmēs atradīsim, ka bērns elements reaģē nevis izmēriem tā mātesuzņēmuma, bet dokuments:

.element ( position: absolute; left: 0; right: 0; bottom: 0; )

Lai bērna elements tiktu novietots absolūti no vecāka elementa, mums tas jāiestata pašam vecāka elementam:

.parent ( position: relative; )

Tagad īpašības, piemēram, left, right, bottomun topatsauksies uz mātes elementu, lai gadījumā, ja mēs bērns elements caurspīdīgs, mēs varam redzēt to, kas sēž pa labi apakšā vecākiem:

Fiksēts

fixedVērtība ir līdzīgs absolute, jo tas var palīdzēt jums novietot elementu jebkur relatīvo dokumentam, tomēr šī vērtība ir neietekmē ritināšanu. Skatiet bērnu elementu zemāk esošajā demonstrācijā un to, kā, ritinot, tas turpina palikt lapas apakšdaļā:

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

Chrome	Firefox	IE	Mala	Safari
4	2	7	12	3.1

Mobilais / planšetdators

Android Chrome	Android Firefox	Android	iOS Safari
88	85	3	8

Lipīga

stickyVērtība ir kā kompromiss starp relativeun fixedvērtībām. Kopš šī raksta tā pašlaik ir eksperimentāla vērtība, kas nozīmē, ka tā nav daļa no oficiālās specifikācijas un tikai daļēji tiek pieņemta atsevišķās pārlūkprogrammās. Citiem vārdiem sakot, iespējams, tā nav labākā ideja to izmantot tiešraides vietnē.

Ko tas dara? Tas ļauj jums novietot elementu attiecībā pret jebko dokumentā un pēc tam, kad lietotājs ir ritinājis gar noteiktu skatu punkta punktu, nofiksējiet elementa pozīciju šajā vietā, lai tas paliek pastāvīgi parādīts kā elements ar fixedvērtība.

Ņemiet šādu piemēru:

.element ( position: sticky; top: 50px; )

Elements būs relatīvi novietots līdz brīdim, kad skata vietas ritināšanas vieta sasniegs punktu, kurā elements būs 50pxno skata augšdaļas. Tajā brīdī, elements kļūst lipīga un paliek pie fixedpozīcijas 50pxekrāna augšā.

Šis demo ilustrē šo punktu, kur augšējā navigācija ir noklusējuma relativepozicionēšana, un otrā navigācija ir iestatīta uz stickyskatu punkta augšdaļu. Lūdzu, ņemiet vērā, ka šī rakstīšanas laikā demonstrācija darbosies tikai pārlūkos Chrome, Safari un Opera.

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.