Overlapping content is a design technique that is used often in print to create more interesting designs and layouts.

In Readz, you can easily create this effect by using the standard functionality of the Design Studio. This article will give you an overview of how this works.

How to create overlapping content?

1. Select the element you want to have overlapping
2. Go to the 'Layout' panel
3. Select the z-index field
4. Enter a value >0
5. Move the element in the desired position
The default behavior in the Design Studio is not to let content elements overlap each other.

Examples

The middle element has z-index value 1, the others 0. You can move the middle image to overlap the others.
The cookies have z-index value 2. It is positioned over the two other images.

Overlapping Elements with Z-Index