Beégésmentes az armatúra miatt a rögzített egység, HTML CSS

Blog / CSS / 5 módon, hogy kapcsolatokat építsen ki, rögzíti a tagolt tetején. A jitter miatt a rögzített blokk (cap menü).

Találkoztam először ezt mikor tette a helyszínen jön panel „Megosztás a szociális hálózatok”, amikor lefelé görgetés gyors (próbáld ki).

Ha referencia-horgony a helyszínen, miután rákattintott a linkre, a szociális hálózati központ fedett felső részét, a tartalom (általában a főcím), és a végfelhasználó egyszerűen nem érti, ahol végül kapott. Akkor próbálja ki magát, ha rákattint a «A» linkre.

És mivel nagyon népszerű tenni a kupakot és fix helyzetben menü: fix. ragacsos a képernyő felső részén, akkor azt hiszem, hogy ez a hely lesz az érdeklődés, hogy sok. Ebben, kitérek több lehetőséget horgonyok tagolt a képernyő felső részén, ha rájuk kattint.

Egy világos megértése minden h2 -zagolovki tettem hozzá kitöltés.

A: Normál horgony

Talán lenne helyes, hogy hívja a poszt nem „módszerek ... 5” és a „4 módszerek ...”. Mivel ez nem egy módszer egyáltalán, és egy jó példa arra, hogy nem kell, de hát.

B: A behúzás formájában ál

Használja ál hozzá padding az elem -: előtt vagy: utána.

Böngésző támogatás: Chrome Természetesen IE8 +, Firefox 3+, Opera 9.25+, Safari 3+.

megjegyzések:

  • Szükség böngésző támogatja a CSS psevodoelementov.
  • A módszer nem működik megfelelően, ha a tárgy nincs a háttérben, vagy töltse (ráközelít tartalom).
  • Ez nem működik rendesen, ha egy elem tulajdonságai padding-top vagy border-top.

B: Pozitív és negatív árrés padding

Az általunk használt padding behúzni és egy negatív árrés. eltávolítására a behúzás - vagy inkább, hogy ez a felhasználó számára.

Vegye figyelembe, hogy padding padding is tartozik a casting, azaz, ha a tétel, háttérkép, akkor valószínű, hogy naedet tartalom előtte. Ahhoz, hogy figyelmen kívül hagyja a kitöltés hozzáadásával a háttérben egy elem, a CSS-tulajdonság háttér-klip: content-box.

Böngésző támogatás: Chrome persze, Firefox 4.0+, Opera 10.6 vagy újabb, Safari 3+.

megjegyzések:

  • Kell a támogatás a böngésző háttér-klip: content-box. de ez csak abban az esetben, ha azt szeretné, hogy adjunk egy háttér elem.
  • Néhány korlátai határértéket használunk (beleértve az árrés-összeomlás - az, amikor az alsó behúzás az első tag és a második felső behúzás határozza meg a legnagyobb, ami lesz a nagysága a behúzás ezen elemek között).
  • Használatra képtelen padding-top.

D: Border és negatív különbözet

Lényegében ugyanaz, mint az előző módszerrel, hanem használja a kitöltés határon. Mit ad nekünk?

  • Most már nyugodtan használhatja padding padding.
  • Megpróbálok tedd jobbra - az elképzelést határ - ez ugyanaz a szivacs. de csak, hogy töltse ki és hatásait. Ezért ha a háttér kitöltés, vagy az elem kell, hogy vegye figyelembe, hogy ez rasprostaranyalas az elem maga és padding. de nem a határon (valójában ez a tiszta), ott lesz háttér-klip: padding-box.
  • Használatának korlátozása a border-top. amely azonban könnyen megoldható - lásd alább.

Böngésző támogatás: Chrome persze, Firefox 1.0+, Opera 10.5+ Safari 3+.

D: D módszer azzal a lehetőséggel, hozzátéve egy border-top

Amellett, hogy a korábbi módszerrel, amely felveszi a felső elem határon. Böngésző Támogatás és pszeudo-háttér-klip (csak akkor, ha a háttérben, vagy kitöltés) van szükség.

Böngésző támogatás: Chrome persze, Firefox 3.5+, Opera 10.5+ Safari 3+.