Understanding & Using the Relative Position in Divi

Understanding & Using the Relative Position in Divi

The relative position property is perhaps the most mysterious of the position types. However, once we understand how it works, we can use it to our advantage when designing a site in Divi. What we discover may surprise you.

In this post we’ll cover:

  • An Overview of Divi’s Four Types of Positioning
  • How the Relative Position “Positions” an Element in Divi
  • 5 Reasons for using the Relative Position in Divi
  • Relative Position vs. Margin
  • Relative Position vs. Transform Translate

Check it out!

Overview of Divi’s Four Types of Positioning

The relative position is one of four position types available in Divi. Here is a quick overview of each one below.

Static (Default)

Static elements technically aren’t “positioned” since they stay with the normal flow or order of elements on the page, and they don’t respond to the top, right, bottom, and left properties like other positioned elements (which is why no offsets are available in Divi for elements in the static/default position). The static position is the default position for any CSS element. In Divi, when we choose the default position for a module, we are choosing the static position. It is also worth mentioning that some elements in Divi (like rows and sections) will have a relative position by default (not the static position).

Relative

Divi Absolute Position

Relatively positioned elements are kind of like static elements in that they follow the normal flow of the page. The main difference is that relatively positioned elements can be positioned using the top, bottom, left, and right properties. Also, unlike static elements, they can also be positioned using the Z Index property.

Absolute

Divi Absolute Position

[…]

 



This article was written by Jason Champagne and originally published on Elegant Themes Blog.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Scroll to Top