The Position Panel allows you to change an element's position relative to other elements on the page, or relative to the page itself.
Understanding how positioning works is a critical part of designing content for the web. By default, elements on the web are positioned normally, or “in-flow”. This means that they will appear one after another, and their position on the page is determined by the elements that surround them. Normal layout flow is what allows content on the web to adapt itself to any screen size and device, as it flows to fill the available space.
You can use the Position Panel to change the position of an element from normal to fixed. This will take an element out of flow, and it will no longer be affected by other elements on the page around it.
You can also use the Position Panel to set the z-index of an element. When elements are set to fixed positions, they may overlap and cover each other. You use this setting to define which elements are "in front" vs. "behind" when fixed-position elements overlap.
Open the Position Panel
To open the Position Panel, click the icon on the right toolbar, select it from the "Window" menu, or press <shift>-P on your keyboard.
=
Changing the Position Setting
This dropdown lets you choose what type of positioning the selected element will use:
Normal. This is the default. The element will be "in flow", and will sit naturally below any elements that precede it on the page.
Fix to Parent. This will allow you to manually position the element relative to its parent. For example, if you have an image inside a container, you could manually position it in the top right corner of that container.
Fix to Page. This allows you to manually position the element relative to the whole page. It will remain in that position even if the user scrolls the browser. Use this option if you want to fix an element to a constant location in your page design. (For example, you can use this to fix a header to the top of the screen.)
Sticky. Sticky positioning means that the element will behave as normally positioned, until it hits the top of the browser. At that point, it will become anchored to the top of the window, and remain there as the users scrolls down the page. It will only scroll off the page when the bottom of its parent element scrolls out of view. This is very handy for creating a header that "sticks" to the top of the browser.
Positioning Grid
This grid provides a visual representation of the element's position relative to its parent. It will become available when an element's positioning is changed to fixed.
You can click and drag the blue dot to visually position the selected element. The small circles at each corner allow you to instantly align the element with the corner of its parent.
Z-index Arrange Order
When you used fixed positioning to set the location of elements on the page, it's possible for them to overlap or even completely cover each other.
To account for this, you can use the z-index to define the stack ordering of elements, and set which one will appear "on top."
Elements can be ordered along a 0-99 positioning scale, with the larger numbers moving the elements "higher" in the stack. (For example, if two elements overlap, an item with a z-index of 5 would appear "on top" of an item with a z-index of 3.)
Positioning Inputs
As an alternative to the positioning grid, you can use the sliders or type a value into these inputs to set the top, right, bottom, and left positioning values. This will determine a fixed element's location relative to its parent.
You can enter percentages or pixel values into these fields.
