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.

Every Divi Section, Row, and Module has access to the Position options group.

By default, all elements have the relative (default) set.

You can assign a position to the element within the Position settings group, including:

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.

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.

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.

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.

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.

When using Divi Position options, remember these tips and best practices.

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).

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.

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.

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.

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.