Overlaying elements (negative margin)ΒΆ

WebAcappella FUSION allows elements to overflow vertically in relation to others using certain CSS properties.

This effect will only appear in testing and publication.

After a few tries and this tutorial, this principle will become natural and you will not hesitate to use it to give more life to your pages.

Overflowing an image onto a box


Here are 2 boxes with an image in the first box (red) and text in the second (blue).

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

I first leave space in the second box (blue) with the high margin

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

Select the image and apply a negative margin

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

Then see the result in test

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

Warning

The negative margin view does not apply in the editor, but only in testing and publishing.

Tip

The negative margins in CSS are in accordance with the official CSS specifications and therefore valid on all current browsers.