Superposer des éléments (marge négative)

WebAcappella FUSION permet de faire déborder verticalement des éléments par rapport à d’autres à l’aide de certaines propriétés CSS.

Cet effet n’apparaitra seulement en test et à la publication.

Après quelques essais et ce tutoriel, ce principe deviendra naturel et vous n’hésiterez pas à l’utiliser pour donner plus de vie à vos pages.

Faire déborder une image sur une box

Voici 2 box avec une image dans la première Box (rouge) et du texte dans la deuxième (bleu) .

../../../_images/1_two_boxes.png

Je laisse d’abord de la place dans la deuxième Box (bleu) avec la marge haute

../../../_images/top_inner_margin.png
../../../_images/2_two_boxes.png

Sélectionnez l’image et appliquez une marge négative

../../../_images/apply_negative_margin.png

Voyez ensuite le résultat en test

../../../_images/result.png

Avertissement

La visualisation des marges négative ne s’applique pas dans l’éditeur, mais seulement en test et à la publication.

Astuce

Les marges négatives en CSS sont conformes aux spécifications officielles CSS et donc valides sur l’ensemble des navigateurs actuels.