The position property consists in the way elements are positioned on the page and in relation to other elements.
Knowing how to use a variety of position properties allows us to create any kind of layout.
On STUDIO, there are 3 position properties available:
In this article, we’ll go over the meaning of each position property with some examples on when to use them, and explain how and when to use z-index.
Position Settings can be found on the left of the top bar after selecting an element, on the Box tab.
Fixed only shows for elements on the first layer. Absolute only shows when fixed doesn’t show.
Relative position is the standard position on STUDIO. It is called relative because elements are positioned relative to each other and their parents, stacking either horizontally or vertically without overlapping.
In most cases, relative position is the most ideal position property to use because it allows us to align elements precisely and to maintain the balance on different screen sizes.
Learn how to move elements with relative position here.
Fixed position consists in ‘pinning’ an element to a position relative to the viewport (the screen). When scrolling down the page, the element will always stay visible. Additionally, other elements on the page won’t be ‘pushed’ away: they will be hidden by the fixed element.
It is often used for header menus.
Setting fixed position
To fix an element, select it and choose ‘fixed’ from the position dropdown.
When an element is fixed, it will cover content below. If you don’t want part of the page to be hidden, add some margin or padding.
NB: Fixed position can only be applied to the first layer on a page.
The first layer is the layer below the base.
To check whether a layer is first or not, have a look at the right-side layer bar.
Absolute position allows you to position an element anywhere on the page without affecting the position of other elements. You can also overlay elements on top of one another.
Absolute position is defined in relation to that element’s parent position.
Setting absolute position
Select an element, choose ‘absolute’ from the position dropdown. The elements edges will turn red. Then, drag the element anywhere you want on the page.
Its position relative to the parent’s borders will show under ‘Distance’ on the top bar. You can set specific value from the top bar too.
NB: Absolute elements are only visible when placed within their parent box. When the element sticks out, you will see a read outline showing the area that is being hidden.
Z-index: Stacking order
Z-index is the stacking order of overlapped items.
Using z-index allows you to create all kinds of creative layouts, such as broken grid.
It is often used with absolute position, as with this position elements can be overlapped. But a ‘three-dimensional’ effect can also be achieved with relative position and the use of shadows, as the example below.
- Select an element
- Click on the z-index drop down from the left side of the box tab and set a value.
When setting z-index values of two elements, the one with the lowest value will go below, the one with the highest value will be shown above.
When no z-index value is set, STUDIO automatically assigns a z index value to elements depending on their position settings:
- Relative: 0
- Absolute: 1
- Fixed: 2
When there is more than one element with absolute position, they will stack on top of one another in order from the lowest element in the layer panel to the top. (Usually this order corresponds to the order in which the elements where added).
For example, in the picture below the yellow square is shown on top because it’s the lowest in the layers panel, the orange is second and red is last; even though each of their z-index value is 1.
To change this stacking order, you can set their z-index values.
For example, to reverse the order of the boxes in the previous example: