Blog / CSS / 5 modalități de a crea link-uri de ancorare cu o liniuță de sus. Eliminarea deplasării datorată unui bloc fix (capac, meniu).
Pentru prima dată am întâlnit acest lucru când am făcut un pop-up "Partajați în rețelele sociale" pe site-ul meu atunci când defilați în jos post (încercați).
Atunci când se utilizează referință ancore site-ul, după ce faceți clic pe link-ul, panoul de rețele sociale a acoperit partea superioară a conținutului (de obicei titlul) și în final utilizatorul pur și simplu nu a înțeles unde a ajuns în cele din urmă. Puteți încerca singur să faceți clic pe linkul "A" de mai jos.
Și din moment ce este foarte popular acum pentru a face capace fixe și poziția meniului: fix. stick la partea de sus a ecranului, apoi cred că acest post va fi interesant pentru mulți. În ea voi lua în considerare mai multe variante de ancore cu liniuțe de la marginea superioară a ecranului când navighez prin ele.
Pentru o înțelegere mai clară a tuturor anteturilor h2, am adăugat o umplere.
R: Ancora standard
Poate că ar fi mai corect pentru a apela postul nu este „metode ... 5“ și „4 metode de ...“. Pentru că nu este o metodă deloc, și un bun exemplu de modul în care nu ar trebui să fie, dar oh bine.
B: indentare pseudo-element
Utilizați pseudo-elementul pentru a adăuga o indentare înaintea elementului -: înainte sau după.
Suport pentru browser: Chrome desigur, IE8 +, Firefox 3+, Opera 9.25+, Safari 3+.
observații:
- Necesită browserul de asistență CSS psevdoelementov.
- Metoda nu funcționează corect dacă elementul are un fundal sau umple (rulează peste conținut).
- Funcția nu funcționează corect dacă elementul are proprietăți de top sau de top.
Î: Plăcuță pozitivă și marjă negativă
Folosim padding pentru a crea o indentare și o marjă negativă. pentru a elimina aceeași indentare sau, mai degrabă, pentru ao face invizibilă utilizatorilor.
Rețineți că învelișul de indentare internă se află, de asemenea, sub umplutură, adică dacă elementul dvs. are un fundal, este posibil ca acesta să lovească conținutul din fața acestuia. Pentru a ignora umplutura atunci când adăugați un fundal unui element, utilizați clipul de fundal al proprietății CSS: caseta de conținut.
Suport pentru browser: Chrome desigur, Firefox 4.0+, Opera 10.6+, Safari 3+.
observații:
- Aveți nevoie de suport pentru fundalul-clip al browser-ului: caseta de conținut. dar aceasta este numai dacă doriți să adăugați un fundal unui element.
- Unele limitări la utilizarea marjei (inclusiv în cazul în care colapsul marjei este cel mai mare, adică valoarea indentării dintre aceste elemente, este determinată de liniuța inferioară a primului element și cu linia superioară a celui de-al doilea element).
- Incapacitatea de a folosi padding-top.
D: Margine marginală și negativă
În esență, la fel ca metoda anterioară, dar în loc să folosiți umplutura, folosiți chenarul. Ce ne dă acest lucru?
- Acum puteți utiliza în siguranță învelișul de indentare internă.
- Voi încerca să mă exprim corect - în teorie, granița este același lucru. dar numai cu umplere și efecte. Prin urmare, atunci când folosim un fundal sau umplem un element, trebuie să ținem seama de faptul că este distribuit elementului însuși și căptușelii. dar nu la graniță (pentru că este transparent), fundal-clip: caseta de padding va ajuta aici.
- Limitarea utilizării frontierei. care este totuși ușor de rezolvat - vezi mai jos.
Suport pentru browser: Chrome desigur, Firefox 1.0+, Opera 10.5+, Safari 3+.
D: Metoda D cu capacitatea de a adăuga partea de sus a frontierei
Adăugați la metoda anterioară, care va adăuga marginea superioară elementului. Este necesar suportul browserului pentru pseudo-elemente și fundal-clip (numai cu fundal sau umplere).
Suport pentru browser: Chrome desigur, Firefox 3.5+, Opera 10.5+, Safari 3+.
Trimiteți-le prietenilor: