POSITION PROPERTY ON CSS
Published: 2022-03-06 20:59:06

 

##What is positioning?

Positioning in this context is the act of putting an element or something in a place or location. To arrange something in a certain spot or position (to put in place). Positioning means to position something.

##What is property?
Property is an attribute, quality, or characteristic of something.

Since we know what position and property mean, we can combine them to make position property. So, we can say position property is the characteristic associated with how something or an element is placed.

In Cascade stylesheet (CSS), position property specifies the positioning method used for a HyperText Markup Language (HTML) element. The position property is used in CSS to position elements on the screen the way you want them to instead of just going along with the default layout. The position property has to be set to specify the type of positioning method to position an HTML element, so the properties will not work unless the position property is determined first.


![Position property](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bb3ot8bk7tnayeedv8rc.jpg)




The position methods that can be attained using this CSS position property are as follows

1. Static Positioning
2. Relative Positioning
3. Absolute Positioning
4. Fixed Positioning
 


##STATIC POSITIONING
By default, all HTML elements are static in their position. Static means they go along with the HTML rules and keep to the default HTML flow. Static positioning can be seen when we have an HTML without any CSS, or if we do not change the position property. The static positioning follows the rules of default HTML flow.


##RELATIVE POSITIONING
This positioning method allows us to place the HTML element to where it would have been if it were static. So what relative positioning does is that it positions an HTML element from how it was by default (the static mode). 
The positioning has four coordinates, the top, bottom, left, and right. And these coordinates require values to determine how we want to move our element.


![statically positioned element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wb1x7vret1s8kl9m2at5.jpg)



The above image is a statically positioned image on the page, and it follows the default HTML rule.
So we will apply a relative positioning to it

![relative positioning CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pextco2ewb0jjd5upx71.jpg)

The above image is the CSS code for applying relative positioning to the image element. In the code, we are instructing it should move the image, 100 pixels left of the previous position. The image below is what we will end up with after applying the relative position to the element.

![Relatively positioned image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2q71stlzdl6plyvgj069.jpg)


You might think, if the coordinate is (left 100px), why is it not going left by 100px? The thing is, when this property is applied, it means that we are taking the left of where that image used to be and giving it a 100 pixels margin from the left of our current image position.

You have to be aware that you do not put only the position property in the code. The positioning coordinate must be specified. Also, when using the relative positioning on a particular element, it does not affect other HTML elements on the screen.

##ABSOLUTE POSITIONING
Absolute positioning means the positioning of an element from its parent element. It means you are adding a margin to its parent element. It is easier to use absolute positioning when thinking about it being relative to the body. 
Also, the parent element does not have to be the body. It can also be the closest parent that has a relative layer.


![statically positioned](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ttzejqjnlyjs3f8c7mfm.jpg)


The image above is the outcome of a statically positioned image in a container class (div) 

![Absolute positioned CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gnoiq7e3ecy45r4gijem.jpg)


Above is the CSS code for applying the absolute positioning with the coordinate of 30px right and with the image (img) being the child to the container class (parent), which is a relative layer (relatively positioned). The image below shows the outcome of absolute positioning in the code.

![Absolute positioned image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9n2j1nq6z2xkrs6qe46h.jpg)




##FIXED POSITIONING

When this type of positioning is used on an HTML element at a particular coordinate. When the web page is scrolled, the element will stay in its current position. It will remain in its position relative to the body of the website. This type of positioning can be used for a navigation bar and also for a sidebar.

![Fixed positioning](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z65nxqztdol0o8mw7snt.jpg)


![fixed positioned](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f35zyx7vjsf4a1chilsm.jpg)


From the image above, the image (img) has been fixed to the top, so even when the web page is being scrolled, the image will remain fixed at that spot as shown in the image below

![Fixed position](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/29q6zq0vt6288qgrid62.jpg)


##CONCLUSION
We have discussed the CSS positioning property. How it works and how best its properties are being used. This will help in understanding how to position elements when working on a web layout.