What Is Position:Relative Useful For

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.

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.

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/

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>

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".

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/

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

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

Difference between static and relative positioning

Static positioning is the default positioning model for elements. They are displayed in the page where they rendered as part of normal HTML flow. Statically positioned elements don't obey left, top, right and bottom rules:

Relative positioning allows you to specify a specific offset (left, top etc) which is relative to the element's normal position in HTML flow. So if I have a textbox inside a div I could apply relative positioning on the textbox to have it display at specific place relative to where it would normally be placed within the div:

There is also absolute positioning - whereby you specify the exact location of the element relative to the entire document, or the next relatively positioned element further up the element tree:

And when a position: relative is applied to a parent element in the hierarchy:

Note how our absolutely-position element is bound by the relatively-positioned element.

And lastly there is fixed. Fixed positioning restricts an element to a specific position in the viewport, which stays in place during scroll:

You may also observe the behaviour that fixed-positioned elements do not cause scroll because they are not considered to be bound by the viewport:

Whereas absolutely-positioned elements are still bound by the viewport and will cause scrolling:

..unless of course your parent element uses overflow: ? to determine the behaviour of the scroll (if any).

With absolute positioning and fixed positioning, the elements are taken out of HTML flow.

---

Related Topics