Pentru a face butonul "Up" să fie utilizat, utilizați CSS, vom folosi proprietatea z-index - ascundeți butonul din spatele zonei fixe. dimensiunea este un pic mai mare decât butonul însuși, al cărui fundal va fi același ca și fundalul site-ului.
Buton Container
- Creați containerul cu butonul:
- Noi scriem stiluri pentru el:
afișare: bloc; definim că această legătură ar trebui afișată ca un bloc. fundal: url ('cale + la + imagine') centru no-repeat; facem butonul un fundal al blocului, indicând browserului că trebuie să fie plasat în centru și să nu se repete. înălțime: 32px; lățime: 32px; înălțimea și lățimea blocului respectiv (le luăm pe baza dimensiunii imaginii butonului). poziție: fixă; fund: 10px; dreapta: 10px; fixați blocul și poziționați-l la o distanță de 10px de la marginea inferioară a browserului și 10px de la dreapta. z-index: 1; pune blocul pe primul nivel.
Capac "capac"
Capacul recipientului va închide butonul dacă pagina este plasată în fereastra browserului și nu există derulare.
- HTML:
- CSS:
fundal-culoare: culoare + fundal + site; setați fundalul blocului la fel ca fundalul site-ului. înălțime: 32px; lățime: 32px; înălțimea și lățimea blocului respectiv (le luăm și pe baza dimensiunii imaginii butonului sau puțin mai mult). poziția: absolută; fund: 10px; dreapta: 10px; facem ca blocul să nu fie fixat ca cel precedent, dar poziționat absolut și să îl aibă la o distanță de 10px de la marginea inferioară a browserului și de 10px de la dreapta. z-index: 2; pune blocul pe al doilea nivel, adică deasupra blocului cu butonul.
Trimiteți-le prietenilor: