Divi Position Options give you granular control over the position of every element on your page.
Position options allow you to move around elements unconstrained from their parent container's limits.
You can design fixed headers and banners, dynamic image collages, and interesting overlapping effects with Divi's Position options.
How To Access Divi Position Options
Every Divi Section, Row, and Module has access to the Position options group.
Click on the gear icon
to open the element's Settings modal window
Go to the Advanced โ Position.
By default, all elements have the relative (default) set.
How Position Options Works
You can assign a position to the element within the Position settings group, including:
Default (static)
Relative
Absolute
Fixed
Default (Static)
The default position is the static position.
Statically positioned elements stay within the normal flow or order of the elements on the page.
Like other positioned elements, they are unaffected by the top, bottom, left, and right properties, so no offset values are available for elements in the default/static position.
Z Index - Controls the element position on the Z axis. Elements with a higher
z-index
number will sit atop elements with lowerz-index
values.
Relative
Relatively positioned elements can change position without affecting the element's relationship to the elements around it.
The element's position is relative to itself. That means you can assign Top, Right, Bottom, and Left offset properties to move the element around without shifting the surrounding elements.
Offest Origin - Determines which corner this element is offset from. The vertical and horizontal offset adjustments will be affected based on the element's offset origin.
Vertical Offset - Adjust the element's position upwards or downwards from its starting location, which may differ based on offset origin.
Horizontal Offset - Adjust the element's position left or right from its starting location, which may differ based on offset origin.
Z Index - Controls the element position on the Z axis. Elements with a higher z-index number will sit atop elements with lower z-index values.
Absolute
The absolute position breaks the element from its static position and allows it to be moved around relative to its parent container.
Absolutely positioned elements act like they are floating on the page. They are not restricted by their parent container limits and are positioned relative to the nearest positioned parent container.
When an element has an absolute position, it's removed from its parent container, and the parent container will collapse as if nothing is inside it.
Location - Adjust the element's starting location within its parent container. You can further adjust the element's position using the offset controls.
Vertical Offset - Adjust the element's position upwards or downwards from its starting location, which may differ based on offset origin.
Horizontal Offset - Adjust the element's position left or right from its starting location, which may differ based on offset origin.
Z Index - Controls the element position on the Z axis. Elements with a higher z-index number will sit atop elements with lower z-index values.
Fixed
Elements with a fixed position stay in one position on the web page and are relative to the browser window or viewport, not to a parent container.
This position can create sticky elements such as fixed headers or a floating banner that stays visible as you scroll down the page.
Fixed position elements break out of the normal flow of the page and have no actual space created within the page.
Location - Adjust the element's starting location within its parent container. You can further adjust the element's position using the offset controls.
Vertical Offset - Adjust the element's position upwards or downwards from its starting location, which may differ based on offset origin.
Horizontal Offset - Adjust the element's position left or right from its starting location, which may differ based on offset origin.
Z Index - Controls the element position on the Z axis. Elements with a higher z-index number will sit atop elements with lower z-index values.
Use Draggable Anchors To Reposition Elements On The Page
When you change an element's position to Relative, Absolute or Fixed, a new draggable anchor icon will appear when you hover over the element.
This allows you to drag the page's modules, rows and sections to change their position. As you reposition the element, its X and Y Offset are adjusted within the module settings.
As with all Divi settings, the X and Y Offset controls can be adjusted independently on desktop, tablet, and smartphone, allowing you to use position options to create responsive designs.
Tips & Best Practices For Using Divi Position Options
When using Divi Position options, remember these tips and best practices.
Relative Length Units Respond Differently
If we use relative length units (like %
or vw
) for responsive design, these will work differently with relative position and transform translation.
A Divi module with a relative position and a horizontal offset of 50%
will move the module horizontally, the amount equal to 50%
of the width of the parent container (or column).
Keep Important Elements Front And Center As You Scroll
Using fixed positions allows you to create floating elements, such as fixed headers or banners.
Fixed elements can be positioned anywhere within the browser viewport and will remain fixed to that location as you scroll down the page.
You can make any element fixed, and some common uses include Fixed headers, floating opt-in forms and lead generation forms, sticky buttons, important notices and more.
Create Custom Fixed Headers In The Theme Builder
One of the best uses of the new fixed position options is the creation of fixed headers in the Divi Theme Builder. You can create fixed menu modules or build a custom header to make the whole section sticky.
Build Floating Banners, Buttons & Opt-In Forms
Anything can utilize the new fixed position options, not just headers. You can create fixed opt-in forms, lead generation forms or floating call-to-actions.
If you want something important to remain accessible for your visitors, you can fix it to their browser viewport so it's always a click away.
Stack Elements To Create Fun Overlapping Effects
Changing an element's position to Relative or Absolute allows it to move around the page freely without disrupting the elements around it. You can even stack modules on top of each other to create overlapping effects and image collages.