Nu prea folosim Opera, dar paginile web trebuie testate pe cît mai multe navigatoare actuale (de preferabil toate) pentru a evita problemele ce apar datorită diferențelor de abordare dintre ele. Una dintre companiile pe care le avem drept clienți îl folosește în mod constant (e vorba de o întreagã echipã), și am avut ocazia să constatăm ceva mai mult care-s diferențe astea: una dintre ele implică imaginile din pagina - nu erau afișate cum trebuie. Dacã în Firefox, Chrome și Internet Explorer apãreau exact unde trebuie, unde se dorea, în Opera cãdeau (dacã se poate spune așa mutarea în partea de jos etichetei div în care erau introduse) din poziția doritã.
Motivul este simplu: Opera are o "micã" problemã cu imaginile la care este atribuitã proprietatea position: relative. Ar putea fi la fel de bine un bug sau o scãpare intenționatã, dar așa ceva poate da peste cap afișarea unei pagini care pare în regulã. Soluția este simplã: se stabilește position: absolute și, folosind proprietãțile top și left se poziționeazã în interiorul etichetei div acolo unde doriți.
În CSS existã 4 modalitãți de poziționare a oricãrui element dintr-o paginã web: static, absolute, relative și fixed. Diferențele de poziționare sînt urmãtoarele:
poziția staticã (position: static) este poziția predefinitã a elementului, iar dacã nu este stabilitã o altã poziționare vafi afișatã pe ecran pe baza locului în care apare în documentul html. Dacã veți dori sã aplicați asupra elementului alte proprietãți precum left și top (stabilește poziția în funcție de marginea din stînga și de sus a elementului superior) ele vor fi ignorate.
poziția absolutã (position: absolute) este cea mai facilã poziție: elementul este scos din poziția sa în cadrul celorlalte elemente ale paginii (dar fãrã sã le afecteze în vreun fel) și este poziționat pe o locație exactã de pe paginã. Pot fi aplicate alte proprietãți precum left, top, right și bottom (stabilește poziția în funcție de marginea din stînga, de sus, din dreapta și de jos a elementului superior).
poziția relativã (position: relative) are ca reper poziția în care este elementul în cadrul elementelor încarcate pe paginã și folosește left, top, right și bottom pentru o poziționare mai precisã.
poziția fixã (position: fixed) este foarte asemãnãtoare cu poziția absolutã, este calculatã în funcție de marginea ecranului dar elementele fixe rãmîn așa mereu. Toate celelalte elemente vor fi afișate deasupra lor (de exemplu: un timbru-watermark sau imaginea dintr-un fundal).