CSS Basics: Position Types Unraveled – Unleash Your Potential with Strategic Positioning

The position CSS property doesn't specify where to position an HTML element on the web page, but rather how to position an element. This means position is used to specify the Type of Positioning.

CSS positioning can be a little fiddly until you understand exactly how it works. On this page we explain the position CSS property. The position property accepts the following five values to determine the type of positioning:

1. static,
2. relative,
3. absolute,
4. fixed und

5. sticky. – The sticky positioning is a mixture of position: relative and position: fixed

At first glance, this property seems to be very simple, as it has only five possible values. But in daily practice, it is not always as obvious as it appears.

The value shown in orange is the standard use of the CSS position property.

Positioning with the position: static property is the default. When using this positioning, the elements are displayed one after another as they appear in the HTML source code. The properties top, right, bottom, and left do not have any effect when using this type of positioning.

The position: static property doesn't need to be specified except if you want to overwrite any other value.

Especially beginners often understand position: relative as the relative distance of an element to other HTML elements. However, this interpretation is not correct. With position: relative, an HTML element is moved relative to itself, i.e. relative to the position where it would be without positioning.

An offset based on the values of the top, right, bottom, and left properties is used to move the element relative to its normal position.

The repositioning of the element doesn't affect surrounding elements. This means they are positioned as if the relatively positioned element were still in its normal place. There will remain an empty gap where the repositioned element would be in static positioning.

Elements that are positioned using position: absolute are removed from the normal flow of content and may overlap other elements of the page. The element is positioned relative to its closest positioned ancestor (if there is one) or relative to the initial block that contains it. This means that the parent has to have a position value that is different from position: static.

If an absolutely positioned element doesn't have a positioned parent element, the document body is used.

The values of top, right, bottom, and left determine the final position of the element.

Other elements behave as if the element doesn't exist on the page. No space is created for the element in the layout.

Absolute positioning is easy to understand, especially for beginners. Fixed pixel values are clear and easy to use. However, completely absolute positioned layouts are not suitable for flexible layouts.

1. Margin can be set for an absolutely positioned box, but this setting wouldn't make sense because an absolutely positioned box sits on top of other positioned HTML elements like a layer.

2. If the width value is not set for an absolutely positioned element, the box is only as wide as is necessary to display the content.

3. In a responsive web design, absolute positioning should be avoided as much as possible.

To keep an element in the same location on the screen when the user is scrolling, you can set position: fixed. Then use the top, right, bottom, and left properties to position the element where you want it.

An element with position: fixed is similar to an absolutely positioned element. Both are removed from the normal flow of content. But fixed elements are always positioned relative to the browser viewport. Keep in mind that fixed elements are not affected by scrolling.

A fixed element doesn't leave a gap in the web page where it would normally been placed.

The position: sticky property is a mix of position: relative and position: fixed. It toggles between relative and fixed, depending on the scroll position. It is positioned relative until it reaches a certain offset while scrolling. Then it sticks to one spot just like a fixed positioned element.

The offsets can be given using the top, right, bottom, and left properties. Sticky elements always create a stacking context.

Usually, the top property is used to define the offset. This keeps the top navigation visible in the viewport while the user scrolls the website from top to bottom.