Get meza theme
///Position

Position

Learn how to control in elements position.

Position options have all what you need to customize element position. In this tutorial we will explore how to use position options.

Position properties

You can choose from five values static, relative, absolute, fixed, sticky.

Static

The element is positioned according to the normal flow of the document. You can’t use offset values top, right, bottom, left or z-index.

Relative

an element’s original position remains in the flow of the document, just like the static value. But now you can use the offset values top, right, bottom, left and z-index.

Absolute

the element is removed from the flow of the document and other elements will behave as if it’s not even there whilst all the other positional properties will work on it. It is positioned relative to its closest positioned ancestor

Fixed

the element is removed from the flow of the document like absolutely positioned elements. In fact they behave almost the same, only fixed positioned elements are always relative to the document, not any particular parent, and are unaffected by scrolling.

Sticky

the element is treated like a relative value until the scroll location of the viewport reaches a specified threshold, at which point the element takes a fixed position where it is told to stick. check browser support

Centering Elements 

Now we learn how to centering elements with absolute or fixed position. Position can’t centering elements on his own, we need to mix between position and transform. So we add  the preset option to do this mix with one click.

Remember any center presets (top center, left center, middle center, right center, bottom center) are a mix between position and transform so if you use transform options it will break the element position until you add transform manually like next video.

Was this article useful?

Yes

No

Last update on: June 6, 2020

Share:

Related Articles

CSS

Advanced css options.

Items animation

Learn what is items animation and how to use it.

Effects

How to add visual effects to elements.

Animation

Learn how to animate elements.