How to Use Layer Relativity

Video Tutorial:


Layer relativity controls the layer’s position relative to the top or bottom of the browser window. This is useful for putting layers exactly where you want them and keeping them there: you can make sticky footers, sticky headers, or just keep your message in view.

Not sure what layer relativity you need? Choose Relative to Top, as this is the one that works best in general situations.

  1. In the Page Builder, click the Layers button in the top toolbar. Add a new layer, or click to edit an existing layer.
  2. Click the arrow icon to toggle Relative to Bottom or Relative to Top.

Relative to Bottom

This will keep your layer sticking to the bottom of the page, and is useful for creating sticky footers or attention bars.

Layers that are relative to the bottom cannot be made scrollable: this is because it’s impossible to scroll past once they’re fixed to the bottom.

Relative to Top

This will keep your layer sticking to the top of the page, and is useful for creating sticky headers or navigation menus.

Layers that are relative to the top can be made scrollable. The top of the layer will stay fixed to the top of your page.

You might not notice layer relativity if your page is short enough to be contained on the browser’s screen.

WARNING: Beware of changing top/bottom relativity while your layer is under construction, as your layers may not behave as expected. Relativity to bottom works by reversing the Y-axis, so if you’ve positioned something 100px down from the top of the page on a layer set to Relative to Top and switch it to Relative to Bottom, it will move to 100px above the bottom of the screen. Always Save before you make changes, and if your layer flies off the screen, hit Undo or refresh the page.