The Position options in Divi let you control how a module is placed within the page layout. These settings are useful for advanced designs that require precise positioning, sticky elements, or layered content.
Where to Find the Position Options
Open the Module Settings: Click the gear icon or the module itself to access the settings.
Navigate to the Advanced Tab: Locate the Position option group.
Position Customization Settings
Position: Define how the module is positioned relative to the document flow.
Relative (Default):
The module stays in the normal document flow, and offsets are applied relative to its position.
Nearby elements are not affected by the offset.
Absolute:
The module is removed from the document flow and positioned relative to its closest positioned ancestor or the viewport.
Useful for floating elements.
Fixed:
The module is removed from the document flow and stays fixed in the same location within the viewport, regardless of scrolling.
Ideal for sticky elements like headers or CTAs.
Vertical Offset: Adjust the module’s position vertically. Positive values move it down, and negative values move it up.
Horizontal Offset: Adjust the module’s position horizontally. Positive values move it to the right, and negative values move it to the left.
Z-index: Control the stacking order of the module.
Higher values place the module above those with lower z-index values.
Useful for layering elements, such as placing a sticky module above a background.
Tips for Using Position Options
Sticky Elements: Use Fixed positioning for sticky modules, such as navigation bars or promotional CTAs.
Layering: Adjust the Z-index to create depth, ensuring critical elements like text remain visible above backgrounds.
Test Responsiveness: Check positioning across devices to prevent overlaps or misaligned elements.
The Position options offer flexibility for advanced layouts, enabling precise control over module placement and creating dynamic, visually engaging designs.