The relative positions on divi property are perhaps the most mysterious of the position types. However, once we understand how it works, we can use it to our advantage when designing the layout with Divi. You will learn new things in this tutorial.
Presentation of the four types of the positioning of Divi
Relative positions on Divi is one of the four types of position available in Divi. Here’s a quick look at each of them below.
Static (default)
Technically, static elements aren’t “positioned” because they stay with the normal flow or order of elements on the page, and they don’t respond to top, right, bottom, and left properties like other positioned elements (i.e. is why none of the offsets are available in Divi for items in static / default position). In Divi, when we choose the default position for a module, we choose the static position. It should also be mentioned that some elements of Divi (like lines and sections) will have relative positions on Divi by default (not the static position).
Relative
Relatively positioned elements are much 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. Additionally, unlike static elements, they can also be positioned using the Z Index property.
Absolute
An absolutely positioned element exits the normal document flow and therefore no actual space is created on the page for the element. We can think of it as an element that floats on top of other elements on the page that take up real space. It will be positioned relative to the closest parent container.
Fixed
Like the absolute position, elements with the fixed position will go out of the normal page flow and have no actual space created on the page. The main difference between the absolute and the fixed is that the fixed position is relative to the window or browser window. In other words, no matter where the element is in the normal flow of the page, once it has been given a fixed position, its position will now be directly linked to the browser window. We can use the top, bottom, left, and right properties to position the element in the window. As fixed elements often hover behind or in front of other elements on the page, Z Index will help rank fixed elements above others.
NOTE: There is another type of positioning in CSS called sticky. A sticky positioned item behaves like a relatively positioned item until we scroll to its container (at a time determined by the top value). Then the item becomes fixed (or stuck) until the user scrolls to the end of the container. However, the sticky position can be a bit unpredictable as other factors can inhibit functionality. In Divi, the sticky option is not available in the built-in options for this reason. However, there are ways to use “position: sticky” in Divi.
How the relative position “positions” an element on Divi
As mentioned in the preview, the Relative positions on the Divi type are similar to the static “position” because the element remains in the normal flow of the document. The real difference is that once we assign an element to the relative positions on divi, it now has new options available for positioning the element. These options include the Top, Bottom, Left, and Right properties as well as the Z Index property.
In Divi, these additional position options can be found under the position option group once the relative positions on Divi have been selected.
Using offsets with relative positions on Divi
The Origin Offset and the Offset values will work together to position our element where we want in the parent container. In this example, we have a module that has relative positions on divi, a top-left offset, a vertical offset of 25 pixels, and a horizontal offset of 25 pixels. Notice how the offset values will move the element away from the offset origin horizontally and/or vertically.
Here is the same module with the same offsets but with an offset origin at the top right.
Here is the same module with the same offsets and an offset origin at the bottom right.
And here is the same module with the same offsets and an offset origin at the bottom left.
No surprise spacing
With relative positioning, the actual space of the element remains in its original place after moving the element using offsets (up, down, left, right). The new position of the element does not move and does not affect the spacing of the rest of the elements on the page. It basically hovers over other elements like a spirit that has left its body.
Why use relative positions on Divi
Reason 1: To make a parent container for absolutely positioned elements
This is probably the most popular application of the relative position type. Since any absolutely positioned element is relative to the closest positioned ancestor, we can choose to make one of its ancestors a positioned element simply by giving it a relative position (the default static position is not technically “positioned”). This keeps the document flow in place (like static) and allows us to choose a container for absolute items.
Reason 2: To move elements without affecting other elements on the page.
With the relative positions on divi, we can use the offsets to push the elements into alignment without affecting the other elements. And with Divi, we can take advantage of the movable user interface to visually position the elements in real-time.
Reason 3: To use the Z index to overlap other elements
By default, static elements cannot be rearranged in the z-axis, unless they are given a relative position. Once in relative position, the element will remain positioned in the normal flow of the document. Only now do we have the possibility to take advantage of Z indexing to place the elements in a particular order when they overlap.
Read more: Discover the new scrolling animation effects on Divi
Reason 4: To avoid using negative margin for position purposes
Relative positioning will leave behind the space of its original position. However, with a negative margin, both the content and its original space are moved. For example, if we add a negative top margin to a row in Divi so that the row overlaps the row above, all rows/content will move with it. This leaves a bit of a mess to clean up that could be avoided by using Relative Position Offsets instead.
If we give the same modulus a relative position, we can use the vertical offset to bring the modulus up without affecting the rest of the spacing on the page.
Although I have often used negative margin to position elements in Divi, it’s probably not a good idea if we can use relative positioning instead. The margin relates to the element’s box modules, so it’s really meant to add spacing in and around the element itself, not so much for positioning the element offset from its parent container as for the relative positioning.
To sum up
It is very likely that at the end of the day, you did not understand much. Perhaps the most surprising aspect of using relative positions on Divi is its impact (or impact) on the rest of the page design. Not only does it work in tandem with the absolute elements, but it also works well with the translated transform to position the elements in the perfect place.
For website maintenance service contact us.