[css] Difference between style = "position:absolute" and style = "position:relative"

Can any one tell me the Difference between style = "position:absolute" and style = "position:relative" and how they differ in case I add it to div/span/input elements?

I am using absolute right now, but I want to explore relative as well. How will this change the positioning?

This question is related to css css-position

The answer is


You'll definitely want to check out this positioning article from 'A List Apart'. Helped demystify CSS positioning (which seemed insane to me, prior to this article).


With CSS positioning, you can place an element exactly where you want it on your page.

When you are going to use CSS positioning, the first thing you need to do is use the CSS property position to tell the browser if you're going to use absolute or relative positioning.

Both Positions are having different features. In CSS Once you set Position then you can able to use top, right, bottom, left attributes.

Absolute Position

An absolute position element is positioned relative to the first parent element that has a position other than static.

Relative Position

A relative positioned element is positioned relative to its normal position.

To position an element relatively, the property position is set as relative. The difference between absolute and relative positioning is how the position is being calculated.

More :Postion Relative vs Absolute


position: relative act as a parent element position: absolute act a child of relative position. you can see the below example

.postion-element{
   position:relative;
   width:200px;
   height:200px;
   background-color:green;
 }
.absolute-element{
  position:absolute;
  top:10px;
  left:10px;
  background-color:blue;
 }

OK, very obvious answer here... basically relative position is relative to previous element or window, while absolute don't care about the other elements unless it's a parent if you using top and left...

Look at the example I create for you to show the differences...

enter image description here

Also you can see it in action, using the css I create for you, you can see how absolute and relative positions behave:

_x000D_
_x000D_
.parent {_x000D_
  display: inline-block;_x000D_
  width: 180px;_x000D_
  height: 160px;_x000D_
  border: 1px solid black;_x000D_
}_x000D_
_x000D_
.black {_x000D_
  position: relative;_x000D_
  width: 100px;_x000D_
  height: 30px;_x000D_
  margin: 5px;_x000D_
  border: 1px solid black;_x000D_
}_x000D_
_x000D_
.red {_x000D_
  width: 100px;_x000D_
  height: 30px;_x000D_
  margin: 5px;_x000D_
  top: 16px;_x000D_
  background: red;_x000D_
  border: 1px solid red;_x000D_
}_x000D_
_x000D_
.red-1 {_x000D_
  position: relative;_x000D_
}_x000D_
_x000D_
.red-2 {_x000D_
  position: absolute;_x000D_
}
_x000D_
<div class="parent">_x000D_
  <div class="black">_x000D_
  </div>_x000D_
  <div class="red red-1">_x000D_
  </div>_x000D_
</div>_x000D_
_x000D_
<div class="parent">_x000D_
  <div class="black">_x000D_
  </div>_x000D_
  <div class="red red-2">_x000D_
  </div>_x000D_
</div>
_x000D_
_x000D_
_x000D_


Absolute places the object (div, span, etc.) at an absolute forced location (usually determined in pixels) and relative will place it a certain amount away from where it's location would normally be. For example:

position:relative; left:-20px;

Might make the left side of the text disappear if it was within 20px to the left edge of the screen.


Absolute positioning is based on co-ordiantes of the display:

position:absolute;
top:0px;
left:0px;

^ places the element top left of the window.


Relative position is relative to where the element is placed:

position:relative;
top:1px;
left:1px;

^ places the element 1px down and 1px from the left of where it originally sat :)


Relative positioning: The element creates its own coordinate axes, at a location offset from the viewport coordinate axis. It is Part of document flow but shifted.

Absolute positioning: An element searches for the nearest available coordinate axes among its parent elements. The element is then positioned by specifying offsets from this coordinate axis. It is removed from document normal flow.

enter image description here

Source


Relative:

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

  2. If you add no positioning attributes (top, left, bottom or right) on a relative element it will have no effect on it's positioning at all. It will behave exactly as a position: static element.

  3. But if you do add some other positioning attribute, say, top: 10px;, it will shift its position 10 pixels down from where it would normally be.

  4. An element with this type of positioning gets affected by other elements and it itself also affects others.

Absolute:

  1. An element with position: absolute; allows you to place any element exactly where you want it to be. You use the positioning attributes top, left, bottom. and right to set the location.

  2. It is placed relative to the nearest non-static ancestor. If there is no such container, it is placed relative to the page itself.

  3. It gets removed from the normal flow of elements on the page.

  4. An element with this type of positioning is not affected by other elements and also it doesn't affect flow of other elements.

See this self-explanatory example for better clarity. https://codepen.io/nyctophiliac/pen/BJMqjX


position: absolute can be placed anywhere and remain there such as 0,0.

position: relative is placed with offset from the location it is originally placed in the browser.