Viršuje / apačioje / kairėje / dešinėje - CSS-gudrybės

Kad top, bottom, left, ir rightsavybės yra naudojamas su padėtyje, kad nustatyti elemento vietą. Jie turi įtakos tik išdėstytiems elementams, kurie yra elementai, kurių positionsavybė nustatyta ne kaip static. Pavyzdžiui: relative, absolute, fixed, arba sticky.

div ( : || || auto || inherit; )

Galite naudoti, pavyzdžiui, norėdami paspausti piktogramą į vietą:

button .icon ( position: relative; top: 1px; )

Arba talpykloje įdėkite specialų elementą.

.container ( position: relative; ) .container header ( position: absolute; top: 0; )

Vertė už top, bottom, left, ir rightgali būti bet kuris iš nurodytų atvejų:

• bet kuris galiojantis CSS ilgis
• elemento, kuriame yra elemento, aukščio (už topir bottom) arba pločio (už leftir right) procentinė dalis
• auto
• inherit

Elementas paprastai tolsta nuo tam tikros pusės, kai jo vertė yra teigiama, ir link jo, kai vertė yra neigiama. Žemiau pateiktame pavyzdyje teigiamas topelemento ilgis perkelia elementą žemyn (toliau nuo viršaus) ir neigiamas ilgis - topelementą į viršų (link viršaus):

Žr. „Pen
Top“: teigiamos ir neigiamos Matsuko Friedlando (@missmatsuko) vertės
„CodePen“.

Pozicija

Iš elemento vieta, kurios vertė yra už top, bottom, left, ar rightpriklauso nuo jo vertės position. Pažvelkime, kas nutinka, kai nustatome tą pačią reikšmę topelementams, kurių skirtingos reikšmės position.

static

topNuosavybė neturi įtakos unpositioned elementai (elementai su efektas positionrinkinys su static). Taip elementai išdėstomi pagal numatytuosius nustatymus. Jei position: static;norite panaikinti topelemento poveikį, galite naudoti kaip vieną metodą .

relative

Kai topjis nustatytas elementui, kurio vertė positionnustatyta relative, elementas judės aukštyn arba žemyn, palyginti su jo pradine vieta dokumente.

Žr. „Pen
Top“: „Matsuko Friedland“ (@missmatsuko)
giminaitis „CodePen“.

absolute

Kai topnustatoma elementui, kurio vertė positionnustatyta absolute, elementas judės aukštyn arba žemyn, palyginti su artimiausiu savo protėviu (arba dokumentu, jei nėra išdėstytų protėvių).

Šioje demonstracijoje rožinė dėžutė kairėje yra 50 pikselių žemyn nuo puslapio viršaus, nes joje nėra išdėstytų protėvių elementų. Rožinė dėžutė dešinėje yra pastatytas 50 taškų žemyn nuo savo tėvų viršaus, nes iš tėvų turi positioniš relative.

Žr. „Pen
Top“: absoliučią Matsuko Friedlando (@missmatsuko)
svetainėje „CodePen“.

fixed

Kai topjis nustatytas elementui, kurio vertė positionnustatyta fixed, elementas judės aukštyn arba žemyn, palyginti su naršyklės peržiūros sritimi.

Žr. Rašiklio
viršuje:
„CodePen“ ištaisė CSS-Tricks (@ css-tricks) .

Iš pirmo žvilgsnio gali atrodyti, kad nėra skirtumo tarp absoluteir fixed. Skirtumą galima pastebėti lyginant juos puslapyje, kuriame yra pakankamai turinio slinkti. Slinkdami žemyn, fixedpadėties elementas visada matomas, o absolutepadėties elementas - tolyn.

Žr. „Pen
Scrolling“: fiksuotas ir absoliutus CSS-Tricks (@ css-tricks)
„CodePen“.

sticky

Kai jis topyra nustatytas elementui, kurio reikšmė nustatyta positionį sticky, elementas judės aukštyn arba žemyn, palyginti su artimiausiu protėviu su slinkties laukeliu (arba peržiūros sritimi, jei nė vienas protėvis neturi slinkties langelio), apsiribodamas jo turinčio elemento ribomis.

Nustatymas topant stickypastatytas elementas nedaro daug, nebent jos konteineris yra aukštesni, nei ji yra, ir jūs turite pakankamai turinio slinkti. Kaip ir su fixed, elementas liks matomas, kai slinksite. Priešingai fixed, elementas iškris iš matymo, kai pasieks jo turinčio elemento kraštus.

Žr. „Pen
Scrolling: fiksuotas ir lipnus“, „CSS-Tricks“ (@ css-tricks)
„CodePen“.

Gotchas

Priešingų pusių nustatymas

Galite nustatyti vertę kiekvienam top, bottom, left, ir rightant vieno elemento. Kai nustatote priešingų pusių ( topir bottom, arba leftir right) vertes , rezultatas ne visada gali būti toks, kokio tikitės.

Daugeliu atvejų bottomignoruojamas, jei topjis jau nustatytas, ir rightignoruojamas, jei leftjis jau nustatytas. Kai kryptis nustatyta į rtldešinę į kairę, leftvietoj jos nepaisoma right. Kad kiekviena reikšmė turėtų poveikį, elementas turi būti positionnustatytas kaip absolutearba fixedir heightnustatyti auto(numatytasis).

Šiame pavyzdyje, mes nustatome top, bottom, left, ir rightį "20px`, ir tikisi, kad kiekvieną vidinę dėžutės pusę, kad būtų 20px nuo išorinio langelį pusių:

Peržiūrėkite „ CSP
-Tricks“ (@ css-tricks)
„CodePen“ viršuje, apačioje, kairėje ir dešinėje esančius rašiklio nustatymus.

Ištaisyta nėra santykinė su peržiūros sritimi

Ne visada elementai, kurių padėtis positionnustatyta, fixedyra peržiūros srities atžvilgiu. Jis bus pastatytas, palyginti su jo artimiausia protėvio su transform, perspectivear filterturto rinkinio į ką nors kita, nei none, jei toks yra.

Erdvės pridėjimas arba pašalinimas

Jei išdėstėte elementą ir nustatėte, kad dabar yra tuščia vieta arba nepakanka vietos, kur tikėjotės, tai gali būti susiję su tuo, ar elementas yra dokumento sraute, ar ne.

Kai elementas pašalinamas iš dokumento srauto, tai reiškia, kad dingsta vieta, kurią jis iš pradžių užėmė puslapyje. Tai yra atvejis, kai elementas yra išdėstytas absolutearba fixed. Šiame pavyzdyje yra absoliučiai išdėstyto elemento dėžutė, kurioje yra langelis, nes absoliučiai išdėstytas elementas buvo pašalintas iš dokumento srauto:

Peržiūrėkite
Matsuko Friedlando (@ missmatsuko) „Pen“ dokumento srautą „
CodePen“.

Naršyklės palaikymas

Galite žvilgtelėti, bet dėl ​​keleto naršyklių topnuosavybės problemų nėra . Naudokite savo nuožiūra.