Logo
Back to Changelog
Positions! Posted on Mar 26, 2021 by Darragh Mc Kay
Image
Until now there has been no way to control how an element is positioned on the canvas. Everything was simply laid out as it would be by default. Today we've shipped 4 ways you can change your element's position: static, relative, absolute and sticky. You can also control the offsets such as top, right, bottom, left. Keep reading to find out more about the individual properties
position: staticPosition 'static' is the default setting on all elements. It will position the element according to the normal flow of the document, ignoring any offsets you have applied to top, bottom, left, right etc.
position: relativeThis will position an element according to the normal flow of the document, much like 'static', but offsets are taken into account, and calculated relative to the elements normal position. It also acts as a position reference for absolutely positioned children
position: absoluteThis will position an element outside the normal flow of the document. Neighboring elements will act as if the element does not exist. Offsets are calculated relative to the nearest, non-static, parent.
position: stickyThis will position an element as 'relative' until it crosses the specified offset, then it will be treated as fixed - until its parent is off the screen. This can be seen in the GIF above.
Built with Noloco