Poziția verticală a elementului orizontal (inline)
Există situații când porțiunea specifică textul acestuia (de exemplu, cuvântul) să fie ridicate (coborâte) deasupra liniei de bază (de mai jos) a textului:
De multe ori, această problemă este rezolvată prin utilizarea etichetelor în acest scop - și . Dar, dacă, înainte de sarcina „Instalați fraza 4px deasupra liniei de bază“ sup nu va ajuta, deoarece Poziția lor depinde de valorile admise ale vertical-align - mijloc, text-top, etc. În general, nu este flexibil, restricții pot apărea în mijloacele de lucru. Și nu ne place restricții și limite stricte, pentru că ne gândim și să caute o soluție.
Să încercăm să iau cuvântul pe 4PX deasupra liniei de bază a textului:
Primul lucru pe care îl faci - cuvântul potrivit (porțiune de text) înveliți în orice element, cum ar fi durata sau același sup (elementul trebuie să fie mai mică caz, să nu fie pe o linie separată). Concluzionăm în tag-ul pentru a fi capabil de a seta proprietățile individuale.
Există situații când porțiunea specifică textul acestuia (de exemplu, cuvânt ) Necesare pentru a ridica (inferior) de mai sus (mai jos), linia de bază a textului
Cel mai simplu lucru pe care ar putea veni în minte - este de a încerca utilizarea de indentare negativă a margin-top:
Dar cu siguranță nu funcționează, deoarece pe margine-top / margin-bottom răspund numai elementelor block-level.
Este timpul să ne amintim proprietatea poziția și valoarea relativă a acestuia. Poziția: în raport cu un element frecvent utilizat pentru elemente copil cu poziționare absolută, poziționate în raport cu limitele sale. Dar poziția: relativă, de asemenea, face posibilă deplasarea elementului, fără a afecta mediul înconjurător. Mutarea poate fi, în termeni de coordonate de top. la stânga. dreapta. de jos.
deschidere <
Poziția: relativă;
sus: -4px;
>
Solutia a fost foarte simplu.
Dacă pagina conține elemente care pot bloca chiar potențial secțiunea a textului (elementul), care sa mutat, acest element trebuie să fie specificat în mod explicit z-index. că nu au existat surprize în viitor.
deschidere <
Poziția: relativă;
z-index: 1;
sus: -4px;
>