Overlapping Elements with Z-Index
Overlapping Elements with Z-Index
CREATING AND CHANGING LAYOUTS
What are 'Liquid' Layouts?
Overview of the Layout Panel
Grouping Elements
Aligning Elements
Distributing Your Content Evenly
Creating Overlapping Content
Making Elements Sticky
Overflow
Guides
Create Consistent Spacing
< BACK TO OVERVIEW
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.
Contact Support
STAY IN THE LOOP
Sign up for product updates