- Static (default for Divi modules): element is in the normal page flow, no relative positioning.
- Relative (default for Divi rows and sections): also in the normal page flow but can be relatively positioned on the page.
- Tip: use to position a button at the bottom of a column + equalize column heights
- Absolute: floating outside the page flow, relative to it’s parent element.
- Fixed: floating outside the page flow, relative to the browser view port.
- Sticky: like relative but gets fixed after scrolling (unpredictable therefor not a position setting in Divi)
Notes
- Relative only change the elements position, not the position of other elements. It hover’s over other elements. This is unlike a negative marging that also moves other elements.
- Z-index only works with a relative position, not with static.
- Position and Translate are similar.
- Translate is better for animations (smoother).
- 50% position is 50% of the parent container.
- 50% translate is 50 of the module itself.
- Use a combi to horizontally center: first position 50% to the right, then translate 50% to the left.
Source: https://www.elegantthemes.com/blog/divi-resources/understanding-using-the-relative-position-in-divi