March 13, 2024

Overlap Elements without Absolute in Elementor using CSS

Play Video

The ability to overlap elements without absolute in Elementor using CSS can make your setup cleaner. This technique allows for a sleek, modern layout while maintaining the integrity and responsiveness of your design. We will show you how you can achieve this overlap effect without the traditional method of absolute positioning, ensuring your design adapts gracefully across all devices.


Please make sure you have the following installed and activated:

Overlapping without Absolute Positioning: Advantages and Disadvantages

Here’s a brief overview of the advantages and disadvantages of using an overlap technique without absolute positioning:

Advantages Disadvantages
Enhanced Responsiveness
Designs automatically adjust to screen sizes, improving user experience.
Requires a deeper understanding of CSS Grid or Flexbox.
Simpler Hierarchy
Easier to manage the DOM structure without deep nesting of elements.
Browser Support
Older browsers may not fully support Grid or Flexbox properties.
Easier Maintenance
Changes to the layout or design are simpler to implement without absolute positioning.
Design Limitations
Some intricate designs may be challenging to achieve without absolute positioning.
Better SEO
Cleaner code and improved site loading times can contribute to better SEO rankings.
Learning Curve
May require time to learn CSS Grid or Flexbox techniques effectively.

Instructions to Overlap Elements without Absolute in Elementor

  1. Open your WordPress dashboard and navigate to the page you wish to edit with Elementor.
  2. Add an image widget and a headline widget into a container and give them both a class name via Advanced > CSS Classes, e.g. image, and heading.
  3. Select the container and set the container Layout to ‘Grid’ and the Columns and Rows each to 1.
    Select the container and set the container Layout to 'Grid' and the Columns and Rows each to 1
  4. Navigate to Advanced > Custom CSS and insert the following CSS code:
    Navigate to Advanced > Custom CSS and insert the following CSS code

    .image {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    .heading {
        grid-column: 1 / 2;
        grid-row: 1 / 2; 

    Tip: Adjust the z-index of your elements if necessary to control their layering.

Official Documentation

Overlap Elements without Absolute in Elementor – Conclusion

Achieving an overlap effect without using absolute positioning in Elementor not only keeps your design responsive but also opens up a realm of creative possibilities. By leveraging CSS Grid within Elementor, you can maintain control over your layout’s adaptability across various devices. This method simplifies the process, making it accessible even for those less familiar with coding, and ensures that your designs remain both elegant and functional.

Required Resources

Elementor Logo
Free Options
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
Overlap Elements without Absolute in Elementor using CSS
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.