CSS Positioning: Simplified for Beginners
Tags: webdev, beginners, tutorial, css
Published: 2023-09-22 08:31:32

CSS positioning is the placement of an element at a desired location utilizing the top, bottom, right, and left attributes, which determine the element's final position.

Imagine 20 students are resuming into an empty classroom of 20 sit, the teacher has the ability to position any of this students in the front sit or the back sit, since he/she has the ability to do so, just with his command  go there the student we occupy any where in the direction the teacher points to or direct them to sit. Also  in CSS, the syntax is the teacher and the class is the parent element while the students are the child element.

For example: 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/osgegs9mj7uqe96afx5i.png)

The original position of the element is top-left. We can now change the position to right or center or anywhere  using the `position` property and appropriate value in your code.  The element will be re-positioned.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/74w7qwf5uz4aunj4zxru.png)

Because the position attribute was added to the code above, the element's position has now moved away from its original position. 

Depending on where you want the element, this can be done not only to the left but also to the desired top or bottom. Let's now understand more about the CSS positioning values.

## Values  of  CSS positioning
In CSS, there are five major values of positioning. They include:

- Relative
- Absolute
- Sticky 
- Fixed and 
- static.

### Relative position value
This is a positioning style that is used in styling an element by moving it from its initial position to the top, bottom, right, or left, depending on the location you want the element to be. 

Generally, this has no influence on the position of the other elements except the element that you are designing. Using this `relative` positioning style without specifying whether `left` or `right`, in which case the element assumes its regular position and it has no effect.  This can be archived by adding `position` property with value as `relative` to the CSS styling. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d9op9f1bjoii3v6fu45d.png)

The above shows the default position of the elements and the Code Pen below shows what happens when the CSS `position` property and the `relative` value is added to one of the elements

{% codepen https://codepen.io/Emmyokans/pen/dywJjJw %}

The position of the red element has changed from the default position.

### Absolute Position value
This positioning style allows you to position an element relative to the parent element or the HTML page itself in the absence of the parent element. 

Imagine you have a big  square as the parent element and also have another small square as the child element  in the big square. You will notice that  both parent and child elements are positioned by default to the top-left side.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/juxpjw01pkwmqhs61ht7.png)

You can use the `position` of value `absolute` to position the child element (the small square) anywhere inside the big square by giving the parent element a `position` with value `relative`. Then, the child element will position relatively anywhere inside the parent element using either the `top`, `left`, `right` or `bottom` elements. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aq6oxan3j2h01yimixv5.png)

Now you can see that the child element has changed position to almost the center of the parent element. Position absolute has been used to repositioned it .

{% codepen https://codepen.io/Emmyokans/pen/abPEjxR %}


NOTE: Position `relative `and `absolute `work the same way except that we use `relative `to identify the parent element. And `absolute `to identify the children element.

### Sticky Position value
As the name implies, this positioning style allows elements to become sticky while scrolling on the viewpoint. It is a bit different from the previously explained styles but trust it is a special one. 

The element that possesses this style or positioning will maintain the relative positioning along at first but immediately become **sticky** or **fixed** when it reaches the specified point white scrolling.  That is after scrolling to a certain point on our screen, this value will fix the position of our element on the screen so it doesn't move.

Consider the code below. And try it 

{% codepen https://codepen.io/Emmyokans/pen/VwqyBoo %}

### Fixed position value
This positioning style allows the element to maintain its relative position and remain fixed even when you scroll the viewpoint. This are majorly used for navigation bar in web designs. the element is fixed to its position when you scroll the page.

{% codepen https://codepen.io/Emmyokans/pen/NWeXLPp %}

## Conclusion
CSS positioning, though initially daunting, can be made super simple for beginners with the right guidance and practice. 

Understanding the basic concepts of relative, absolute, fixed, and static positioning, as well as their practical applications, empowers beginners to enhance the layout and design of their web projects. 

With continued learning and hands-on experience, beginners can confidently harness the power of CSS positioning to create visually appealing and well-structured web pages.