When Do We Use "Position:Relative" in CSS

When do we use position:relative in CSS?

I mostly use position :relative in the element when I know the inner element of that element is going to be positioned absolutely.

For example If I have two divs and outside div is a static block and elements inside the outer div is going to be positioned absolute relative to the outer div. Then use position:relative for the outer div and inner div should use position:absolute. Now the inner div elements can be placed anywhere using top, bottom, left and right attributes of CSS.

When to exactly use position relative

Case 1

You have inner element that is positioned absolute and want that element to stick to it's parent. Than you apply position: relative to parent element. By default absolute element pops out from DOM flow and takes position from closest relative element (html by default)

Case 2

You want to move element but still keep it in DOM flow. Than apply position: relative and move it with left/right/top/bottom properties.

Case 3

You want to place one element over another. Static elements does not take effect of z-index that's why you need to set it's position to relative, static or fixed

There may be other use cases

---

.a {  background-color: #ddd;    left: 50px;  top: 150px;  position: relative;    width: 200px;  height: 200px;  text-align: center;}.absolute,.a div {    position: absolute;  left: 50px;  top: 50px;    width: 100%;  height: 60px;  background-color: rgba(250, 0, 0, .4);}

<div class="a">  HTML > relative  <div>HTML > relative > absolute</div></div>
<div class="absolute">HTML > absolute</div>

Position Relative vs Absolute?

Absolute CSS Positioning

position: absolute;

Absolute positioning is the easiest to understand. You start with the CSS position property:

position: absolute;

This tells the browser that whatever is going to be positioned should be removed from the normal flow of the document and will be placed in an exact location on the page. It won't affect how the elements before it or after it in the HTML are positioned on the Web page however it will be subject to it's parents' positioning unless you override it.

If you want to position an element 10 pixels from the top of the document window, you would use the top offset to position it there with absolute positioning:

position: absolute;
top: 10px;

This element will then always display 10px from the top of the page regardless of what content passes through, under or over the element (visually).

The four positioning properties are:

1. top
2. right
3. bottom
4. left

To use them, you need to think of them as offset properties. In other words, an element positioned right: 2px is not moved right 2px. It's right side is offset from the right side of the window (or its position overriding parent) by 2px. The same is true for the other three.

Relative Positioning

position: relative;

Relative positioning uses the same four positioning properties as absolute positioning. But instead of basing the position of the element upon the browser view port, it starts from where the element would be if it were still in the normal flow.

For example, if you have three paragraphs on your Web page, and the third has a position: relative style placed on it, its position will be offset based on its current location-- not from the original sides of the view port.

Paragraph 1.

Paragraph 2.

Paragraph 3.

In the above example, the third paragraph will be positioned 3em from the left side of the container element, but will still be below the first two paragraphs. It would remain in the normal flow of the document, and just be offset slightly. If you changed it to position: absolute;, anything following it would display on top of it, because it would no longer be in the normal flow of the document.

Notes:

• the default width of an element that is absolutely positioned is the width of the content within it, unlike an element that is relatively positioned where it's default width is 100% of the space it can fill.

• You can have elements that overlap with absolutely positioned elements, whereas you cannot do this with relatively positioned elements (natively i.e without the use of negative margins/positioning)

---

lots pulled from: this resource

Why is position:relative needed in order to position its children?

Suppose you have an element "A" with position:absolute, the element "A" will be positioned based on the body. It will not have relation to its parent elements. But if the element "A" have a parent "B" with position: relative, the position of "A" will be related on this parent "B".

Why do we need to use position: relative for css image gallery?

They have used position: relative; there because they have a nested absolutely positioned element, so when you have an element positioned absolute you need to wrap the element with a position: relative; container, else it will flow out in the wild..

I will share 2 demos with you, one with positioned relative container and other without the position relative container

Demo 1 (Position Relative container)

Demo 2 (Without Position Relative container)

Note: Elements which use position: relative; doesn't mean that it will always hold absolute positioned elements, it may not contain absolute elements, because if the designer wants to use top and left properties, he need to use position: relative; there as top and left won't work on static position.

Demo 3 (Relative Position)

Demo 4 (Static Position)

Also, this logic doesn't apply ONLY to CSS Gallery, it's a positioning
concept in CSS. You can read some detailed tutorials on CSS
Positioning

Why set position relative when is not necessary

There is basically 3 reasons why one set an element to position: relative

1. To re-position the element itself, i.e. top: 20px

2. To use z-index on that element. A side effect, if one does not set a z-index, it will still position itself on top of statically positioned elements.

3. Limit the scope of absolutely positioned child elements, so a child of the relatively positioned element can be absolutely positioned within that block.

---

Here is an old article that describes the difference between the most used position values:

• https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Using position is good practice or not

Check this explained in detail:

https://css-tricks.com/forums/topic/rwd-can-we-use-position-absolute-or-fixed-in-responsive/

Understanding relative position in css

"Normal position" is in the context of the DOM, and refers to Normal flow:

First of all, individual element boxes are laid out by taking the elements' content, then adding any padding, border and margin around them.

By default, a block level element's content is 100% of the width of its parent element, and as tall as its content. Inline elements are as tall as their content, and as wide as their content.

This is explained in further detail in the CSS flow layout:

Normal Flow, or Flow Layout, is the way that Block and Inline elements are displayed on a page before any changes are made to their layout. The flow is essentially a set of things that are all working together and know about each other in your layout. Once something is taken out of flow it works independently.

In normal flow, inline elements display in the inline direction, that is in the direction words are displayed in a sentence according to the Writing Mode of the document. Block elements display one after the other, as paragraphs do in the Writing Mode of that document. In English therefore, inline elements display one after the other, starting on the left, and block elements start at the top and move down the page.

---

It's worth noting that all elements have static positioning by default:

Static positioning is the default that every element gets — it just means "put the element into its normal position in the document layout flow — nothing special to see here."

And relative positioning simply allows for modification of the position:

This is very similar to static positioning, except that once the positioned element has taken its place in the normal layout flow, you can then modify its final position.

What is position:relative useful for?

It's useful if you want to offset an element without futzing around with margins and its consequences for other elements. Let's say you want to intentionally have an image poke out of the side of a container and (nearly) overlap with some content in a container beside it.

------------- -----
|           | |   |
|   X  -------| Y |
|      |  a  ||   |
|      -------|   |
------------- -----

Container a is part of the normal text flow of X and you want to keep it that way, you just want it poking out of the side a bit as a neat effect. If you do that with margins, it may get really messy and reflow some of your other content.

By using position: relative; left: 10px; you can get that effect easily without the side effects.

---

Related Topics