Uneori, ca si in cazul butoanelor bogate grafic dar editabile ca text, e nevoie sa poti folosi un element html pozitionat ABSOLUT intr-un context RELATIV.
Este vorba despre proprietatea CSS “position” care poate lua una din cele 4 valori: absolute / relative / fixed / static. O sa las aici deoparte valorile fixed si static, si-o sa ma concentrez un pic asupra celor care ne intereseaza aici: relative si absolute.
In imaginea din stanga, pe care o folosesc ca exemplu, chenarul albastru resprezinta elementul parinte (contextul), chenarul rosu este un element pozitionat absolut, iar cel verde este un element pozitionat relativ. Elementele rosu si verde sunt incluse, evident, in cel albastru, ca si cod.
Relative – folosind proprietatea CSS position: relative; instruim browserul sa pozitioneze elementul in cauza relativ la contextul in care se afla acesta, in mod fluid. Cu alte cuvinte, fortam elementul relativ sa depinda, ca pozitionare, de tag-ul imediat superior lui DAR SI de curgerea in-line a elementelor din respectivul context. Cu alte cuvinte, sa se comporte, in termeni grosieri, ca o litera intr-un text.
Absolute – folosind proprietatea CSS position: absolute; instruim browserul sa pozitioneze elementul in cauza relativ la contextul in care se afla acesta, dar independent de curgerea in-line a celorlalte elemente din context. Cu alte cuvinte, fortam elementul relativ sa isi mentina coordonate de pozitionare fixe, exprimate in pixeli sau directii.
Cel putin in teorie.
Pentru ca, atunci cand incerci sa faci asta in practica, observi ca IE si FF o iau razna cand folosesti position:absolute, fiecare interpretand diferit LA CINE se face raportarea in pozitionare. Si acelasi element pozitionat absolut va fi afisat complet diferit in diferitele browsere.
DE CE? Pentru ca diferite browsere decid diferit daca raportarea se face la elementul html imediat superior ierarhic (parent tag) sau la BODY.
Pare absurd, stiu. Dar totul are o explicatie. Atunci cand trebuie sa pozitioneze un element ABSOLUTE, toate browserele “cauta” in sus, ierarhic, urmatorul element HTML definit ca RELATIVE. Unele considera ca acesta e parent-ul, altele ca acesta ar fi body. De aici si diferenta de prelucrare vizuala.
Rezolvarea? 🙂 e simpla: Chiar daca pare redundant, atunci cand vrei sa-l pozitionezi pe X absolut in Y, atunci defineste-l pe Y ca avand position: relative;.
Asta va forta orice browser sa inteleaga EXPLICIT la cine se face raportarea (urmatorul element superior ierarhic care este relative fiind in mod explicit definit), si sa rezolve vizual problema la fel, indiferent daca vorbim de FF, IE sau orice alt program contemporan.