loading...

The cheatsheet of position: relative and position: absolute

melnik909 profile image Stas Melnikov ・3 min read

The basics of CSS is a series of cheatsheets that help you understand basic concepts of CSS. In the post we learn how relatively-positioned and absolutely-positioned elements work.

What are relatively-positioned elements?

📌 Relatively-positioned elements are elements that have the position property is setted to relative.

The properties of relatively-positioned elements

📌 The relative value don't affect on the display property so the block and inline elements don't change the value of the display property. Thus initial displaying properties of the block and inline elements is saved.

📌 Also the elements save the default position.

The top, right, bottom and left properties for relatively-positioned elements

📌 The top, right, bottom and left properties of relatively-positioned elements define X and Y coordinations relative to the initial position. Also relatively-positioned elements aren't limited edges of their parent elements.

If you set only one property (top, right, bottom or left) the second coordinate isn't changed.

📌 If you set the two properties the element is positioned depending on them.

📌 If you change the width area of the parent element the coordinations of relatively-positioned element changes also. For example, I add padding: 20px to the parent element.

📌 When relatively-positioned elements go beyond the padding, border and margin areas of the parent it saves its content area height.

📌 If the parent element has a few relatively-positioned elements they can overlap at each other.

📌 Also relatively-positioned elements overlap elements with position: static.

What are absolutely-positioned elements?

📌 Absolutely-positioned elements are elements that have the position property is setted to absolute.

The properties of absolutely-positioned elements

📌 The absolute value changes the display property value so the element has the display computed value is block.

📌 Absolutely-positioned elements are removed from the normal document flow. Thus if the parent element has only them its the height computed value is 0.

📌 If no, then the height computed value depending on height of other elements.

📌 The width and height of absolutely-positioned elements is calculated automatically depending on the content.

📌 Absolutely-positioned elements are positioned to top left corner of the parent content width area.

The top, right, bottom and left properties for absolutely-positioned elements

📌 The top, right, bottom and left properties of absolutely-positioned elements define X and Y coordinations relative to the parent element's borders that has the position property with the relative, absolute, fixed or sticky value. If there is no such element then from the window's borders.

📌 If you set only one property (top, right, bottom or left) the second coordinate isn't changed.

📌 If you set the two properties the element is positioned depending on them.

📌 If you change the width area of the parent element the coordinations of an absolutely-positioned element changes also.

📌 Also absolutely-positioned elements can go beyond the padding, border and margin areas of the parent.

📌 If you set the pair left-right or top-bottom properties an absolutely-positioned element will fill all free space in the X or Y axes.

📌 Also if you set the left, right, top and bottom properties at once an absolutely-positioned element will fill all free space in the X and Y axes.

📌 The negative values can be used also. In this cases the position of absolutely-positioned elements are opposite to positive values.

📌 If the parent element has a few absolutely-positioned elements they can overlap at each other.

P.S. Friends don't forget to share this post, if you like it. Thus a lot of people can study that.

Also this post was written with the support of my patrons: Ashlea Gable, Tatiana Ten, Claire Collins, Ben Rinehart, Eva Jamen. Go to on my Patreon via this link to know what it is.

Posted on by:

melnik909 profile

Stas Melnikov

@melnik909

I help people to learn new things about HTML and CSS on Patreon platform

Discussion

markdown guide
 

This was really well put together and the code pens are helpful!