Absolute Positioning

In CSS there are a couple of different positioning modes, but the more important ones we will talk about for now are the normal flow and absolute positioning.

Normal Flow

It is simply the default positioning of our elements on our page or we can also achieve the normal flow by setting the position to the relative value.

/** Default postioning **/
postion: relative        

In this case, we say that an element is in flow, which means the elements are laid out according to the source code in the HTML. This is very straightforward. Just keep in mind that is called normal flow.

Absolute Positioning

Setting an element's position property to absolute allows us to place it anywhere on the page. This removes the element from the normal flow, causing it to lose any impact on surrounding elements and potentially overlap them. To position an absolutely positioned element, use the top, bottom, left, or right properties, relative to a relatively positioned container

To understand this we need to practice and create the following container.

We will create a Sale button on the top-left of the box.

First, we need to understand that we have three classes: the parent class, product, and two other classes, product-title and sale

Next, we need to set the .product class to position: relative to the normal flow.

Then, we will set the .sale class to position: absolute and adjust the top and left properties to position the button. Alternatively, we can use any combination of top, left, bottom, and right to achieve the desired placement.

Feel free to experiment with positioning live by updating the top, left, bottom, and right properties using this URL ??

To sum up, this article guides you through positioning elements with CSS by setting a parent class to relative and child elements to absolute, allowing precise control over their placement. Experiment live and unleash your creativity using the provided URL!

Written by Qabas, Web Developer. This is one of many articles on CSS.