CSS Positioning: Simplified for Beginners

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:

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.

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.

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

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.

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.

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 .

NOTE: Position relativeand absolutework the same way except that we use relativeto identify the parent element. And absoluteto 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

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.

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.