Ahhoz, hogy a közelgő "Up" gomb CSS-t használjon, a z-index tulajdonságot használjuk - elrejtjük a rögzített terület mögötti gombot. a méret egy kicsit nagyobb, mint maga a gomb, amelynek háttere megegyezik a webhely hátterével.
Gomb konténer
- Hozzon létre egy tartályt a gombbal:
- Stílusokat írunk rá:
kijelző: blokk; hogy ezt a linket blokkként kell megjeleníteni. háttér: url ('elérési út + - kép') center no-repeat; a blokk hátterét a gombbal jelezzük, jelezve a böngészőnek, hogy középen kell elhelyezni, és nem megismételni. magasság: 32px; szélesség: 32px; a blokk magassága és szélessége, illetve a gomb méretének megfelelően. pozíció: fix; alsó: 10px; jobb: 10px; rögzítse a blokkot, és helyezze el 10px távolságra a böngésző alsó szélétől, és 10px-t jobbra. z-index: 1; tedd a blokkot az első szintre.
Konténer-sapka "sapka"
A tartály fedele bezárja a gombot, ha az oldal a böngészőablakba kerül, és nincs görgetés.
- HTML:
- CSS:
háttérszín: szín + háttér + helyszín; állítsa be a blokk hátterét ugyanúgy, mint a webhely hátterét. magasság: 32px; szélesség: 32px; a blokk magassága és szélessége, illetve a gomb méretének vagy valamivel többnek a alapján. pozíció: abszolút; alsó: 10px; jobb: 10px; a blokkot nem rögzítettük, mint az előzőt, de feltétlenül elhelyezzük, és a böngésző alsó szélétől 10px-ig, 10px-t pedig a jobb oldali részből állítjuk. z-index: 2; helyezze a blokkot a 2. szintre, vagyis a blokk felett a gomb segítségével.