Felső / alsó / bal / jobb - CSS-trükkök

A top, bottom, left, és a righttulajdonságokat használjuk a helyzetben, hogy állítsa be az elhelyezés egy elem. Csak azokra a pozicionált elemekre vannak hatással, amelyek olyan positiontulajdonságúak, hogy a tulajdonság minden másra van beállítva static. Például: relative, absolute, fixed, vagy sticky.

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

Használhatja például egy ikon helyére tolására:

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

Vagy helyezzen egy speciális elemet a tartály belsejébe.

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

Az érték top, bottom, leftés rightbármelyik lehet az alábbi:

• a CSS érvényes hosszainak bármelyike
• a tartalmazó elem magasságának (for topés bottom) vagy szélességének (for leftand right) százalékos aránya
• auto
• inherit

Az elem általában elmozdul egy adott oldalról, ha az értéke pozitív, és felé, amikor az érték negatív. Az alábbi példában topaz elem pozitív hossza lefelé (felülről), a negatív hossza pedig topfelfelé (a teteje felé):

Lásd a Pen
Top: pozitív és negatív értékeket Matsuko Friedland (@missmatsuko)
a CodePen-en.

Pozíció

Az elhelyezés egy elem egy értéket top, bottom, leftvagy rightattól függ, hogy az ár-érték position. Vizsgáljuk meg, mi történik, ha ugyanazt az értéket állítjuk be a topkülönböző értékű elemekre position.

static

A toptulajdonság nincs hatással a nem pozícionált elemekre (a elemre positionállítva static). Az elemek alapértelmezés szerint így vannak elhelyezve. Lehet használni position: static;, mint egy módszer, hogy vonja vissza a hatása topegy elemet.

relative

Ha be topvan állítva egy elemre, amelynek positionértéke be van állítva relative, akkor az elem felfelé vagy lefelé mozog az eredeti elhelyezéséhez képest a dokumentumban.

Lásd a toll
tetejét: Matsuko Friedland (@missmatsuko)
rokona a CodePen-en.

absolute

Ha be topvan állítva egy elemre, amelynek positionértéke be van állítva absolute, akkor az elem felfelé vagy lefelé mozog a legközelebbi elhelyezett elődhöz (vagy a dokumentumhoz, ha nincsenek elhelyezkedő elődök).

Ebben a bemutatóban a bal oldali rózsaszín mező 50 képpontos távolságra van lefelé az oldal tetejétől, mert nincsenek elhelyezve az ősei. A rózsaszín doboz a jobb oldalon helyezkedik el 50px le a tetejét a szülő, mert a szülőnek positiona relative.

Lásd a Toll
tetejét: abszolút: Matsuko Friedland (@missmatsuko)
a CodePen-en.

fixed

Ha be topvan állítva egy elemre, amelynek positionértéke be van állítva fixed, akkor az elem felfelé vagy lefelé mozog a böngésző nézetablakához képest.

Lásd a Toll tetejét
: CSS-Tricks (@ css-tricks)
javította a CodePen-en.

Első pillantásra úgy tűnhet, hogy nincs különbség a absoluteés között fixed. A különbség akkor látható, ha összehasonlítja őket egy olyan oldalon, amelynek elegendő tartalma van a görgetéshez. Lefelé görgetve a fixedpozícióelem mindig látható, míg a absolutepozícióelem elgördül.

Lásd a
Tollgörgetés: fix vagy abszolút CSS-trükkök (@ css-tricks) segítségével
a CodePen-en.

sticky

Ha be topvan állítva egy elemre, amelynek positionértéke be van állítva sticky, akkor az elem felfelé vagy lefelé mozog a legközelebbi elődhöz képest egy gördülődobozzal (vagy a nézetablakkal, ha egyik ősnek sincs gördítődoboza), korlátozva az elemet tartalmazó határokra.

Beállítása topegy stickyelhelyezett elem nem sokat, hacsak a konténer magasabb, mint ez, és van elegendő tartalom tekercset. Az fixedelemhez hasonlóan görgetés közben is látható marad az elem. Ellentétben fixedaz elem kiesik a látótérből, amint eléri a benne lévő elem széleit.

Lásd a Pen
Scrolling: fix vs sticky CSS-Tricks (@ css-tricks)
által a CodePen-en.

Gotchas

Ellenkező oldalak beállítása

Akkor meg egy értéket az egyes top, bottom, leftés rightegyetlen elem. Ha az ellentétes oldalak ( topés bottom, vagy leftés és right) értékeit állítja be , akkor az eredmény nem mindig megfelelő.

A legtöbb esetben bottomfigyelmen kívül hagyja, ha topmár be van állítva, és rightfigyelmen kívül hagyja, ha leftmár be van állítva. Ha az irány rtl(jobbról balra) van állítva , leftakkor a rendszer figyelmen kívül hagyja right. Annak érdekében, hogy az egyes értékek hatással lehessenek, az elemnek positionállítania kell a absolutevagy értéket fixedés a heightbeállítást auto(alapértelmezett).

Ebben a példában mi meg top, bottom, leftés righta `20px`, és elvárják, mindkét oldalán a belső dobozt, hogy 20px el az oldalán a külső doboz:

Tekintse meg a
CSS-Tricks (@ css-tricks)
által a CodePen tetején, alján, balján és jobbján található tollbeállítást.

Ha javítva van, az nem viszonyul a nézetablakhoz

Elemek positionhalmaza, hogy fixednem mindig viszonyított pozícióját az ablakon. Ez lesz pozícionálva legközelebbi őse egy transform, perspectivevagy filtertulajdonság értéke semmi más, mint none, ha létezik ilyen.

Hely hozzáadása vagy eltávolítása

Ha elhelyezett egy elemet, és úgy találta, hogy van egy üres hely vagy nincs elegendő hely a vártnál, akkor annak köze lehet ahhoz, hogy az elem be van-e vezetve a dokumentum folyamatába vagy sem.

Ha egy elem kivonásra kerül a dokumentum folyamatából, az azt jelenti, hogy az eredetileg az oldalon elfoglalt hely eltűnik. Ez akkor áll fenn, amikor egy elemet absolutevagy fixed. Ebben a példában az abszolút helyzetben lévő elem tartalmazó doboza összeomlott, mert az abszolút helyzetben lévő elemet eltávolították a dokumentum folyamatából:

Lásd
Matsuko Friedland (@missmatsuko)
tolldokumentum-folyamatát a CodePen-en.

Böngésző támogatás

Kukucskálhat, de nincsenek böngészőkön átnyúló aggályai az topingatlannal kapcsolatban. Használja tetszés szerint.