Understanding relative position in css

Question

Following this link.

It states:

An element with position: relative; is positioned relative to its normal position.

How can we define 'normal position'? Is it in context of parent element or overall screen(viewport)?

This is the way I tried to understand relative position. Relative position: Its position in DOM or a better way to view it - the starting location of that particular element. With relative positioning set to it, you can move it any direction from its current starting position. — Gosi, Aug 16 '19 at 03:13

score 3 · Answer 1 · answered Aug 16 '19 at 03:00

Normal Position is the actual position of the element in DOM. If you remove the left property for the div in below example then it will be shifted back to its normal position.

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

<p>An element with position: relative; is positioned relative to its normal position:</p>

<div class="relative">
This div element has position: relative;
</div>

Hope it helps.!

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

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

score 2 · Answer 3 · answered Aug 16 '19 at 03:03

The normal position refers to the initial position of certain element within the viewport.

You can relatively move (top, right, bottom and left) an object if this object has position: relative set and it will move depending on the starting position of this same element.

Also, let's say you have a parent div with a position set to relative; then. inside of it you have another div with the position set to absolute. This second element will 'absolutely' move in its parent context/size which is the div with the relative position.

Take a look at this link so you have some extra idea of how it works.

I know it seems kinda weird at first but you can easily get it with practice.

score 2 · Answer 4 · answered Aug 16 '19 at 03:07

Relative means it is relative to the content on the page. If it's in a row with inline set, it is relative to the one beside it - meaning it will be positioned next to it, relative to where a div without any position would normally go.

So if there is nothing on the page, it will flow the same as all other content, and position to the top left by default.

Understanding relative position in css

4 Answers4