> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://docs.stylecloud.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to Use Z-Index for Layered Design

When working with overlapping elements, controlling which content appears in front is essential for a clean, functional layout. That’s where **Z-Index** comes in.
Z-Index allows you to manage the **stacking order** of elements on the page, you can control what stays on top and what sits behind. In this article, you will learn how to use Z-Index effectively to create dynamic, well-structured designs that look great and function smoothly for your StyleCloud websites.
---

### How to use Z-Index 

**All content should be wrapped in a Section Element**. The Section acts as the foundational container that controls layout settings like padding, background, spacing, and positioning.

###### Sections provide consistent control over spacing and alignment.
* Many advanced layout settings—including positioning and Z-Index—**require** content to be inside a Section to work properly.
**Z-Index** is used to control how elements are layered on top of each other. A higher Z-Index means the element will appear above others with lower values—**but only when those elements are on the same structural level**.

Example: 
You have **two columns**, and you want the content from **Column 1** to overlap content in **Column 2**.
* **Correct Approach**: Set a higher Z-Index on Column 1 and a lower Z-Index on Column 2.
* **Incorrect Approach**: Setting Z-Index on child elements won’t have the desired effect unless the columns themselves are configured properly.

Example: Porto Art Image with Text 4

![](https://storage.crisp.chat/users/helpdesk/website/-/4/b/4/3/4b432516dd882000/z-index_boyph4.png)
---

###### Tutorial Video

${frame}[How to Use Z-Index](https://www.loom.com/embed/3260ac6ffd5645349de6e54f6f240973)