Secció 4: Posicionament CSS

4. Esquemes de posicionament

4.4. Exemple de posicionament relatiu: caixes de solució

Com a exemple de posicionament relatiu estudiarem com es fan les caixes que apareixen amb la solució a les preguntes d'aquest curs.

Fixem-nos en quin és el problema. La caixa solució es mostra quan fem clic al text "Solució". Això no es pot fer amb CSS, cal escriure un senzill codi JavaScript. En tot cas no és el què ara en s preocupa.

Què és el que volem fer? D'una banda volem que la caixa no estigui en el fluxe normal, sinó que es superposi al text que hi hagi a continuació. Això implica fer servir posicionament absolut.

Ara bé, volem que el popup aparegui al costat del text "Solució". No sabem quines són les coordenades del popup, ja que depenen del contingut anterior, i en conseqüència no el podem posicionar mitjançant top i left.

La solució està en combinar posicionament absolut i relatiu. (continuarà...)