6

I'm reading this article about position, and I don't understand why in this example the relatively positioned div is affected by the BODY, yet the absolutely positioned box ignores it?
Aren't they suppose to behave the same when they are positioned inside another element?

the CSS:

body {
     display: block;
     margin: 8px;
}

#box_1 { 
     position: relative;
     width: 200px;
     height: 200px;
     background: #ee3e64;
}
#box_2 { 
     position: absolute;
     top: 0;
     left: 100px;
     width: 200px;
     height: 200px;
     background: #44accf;
}
Amar Palsapure
  • 9,590
  • 1
  • 27
  • 46
ilyo
  • 35,851
  • 46
  • 106
  • 159

5 Answers5

8

Basically you have four position states, which are as follows:

  • static (default)
  • relative
  • fixed
  • absolute

The difference between relative and absolute is that relative is "relative" to itself (left:15px will pad it to the left with 15px), but absolute is relative to its parent (first non-static parent that is) and applying the same attribute (left:15px) will result in it being shifted 15px away form the left edge of the parent element.

This is actually a fascinating study and will help immensely in understanding web layout.

Joseph Marikle
  • 76,418
  • 17
  • 112
  • 129
1

Here is the easy explanation of position: absolute and position: relative.

With absolute position, we can move an html element anywhere on the page.If we do not define any position element then it will take position from body element otherwise it will take it's position from the nearest defined position element. Below is the example.

In this case, 'div2' takes the position from 'div1' element.

<div id='div1' style="position: relative; left: 100px;top: 10px;"> 
<h1>This is the first position element</h1>
<div id='div2' style="  position: absolute;left: 100px;top: 150px;">
<h2>This is a heading with an absolute position</h2>
</div>
</div>

In this case 'div2' takes position from body elements as no position is defined.

  <div id='div1'> 
    <h1>This is the first position element</h1>
    <div id='div2' style="  position: absolute;left: 100px;top: 150px;">
    <h2>This is a heading with an absolute position</h2>
    </div>
    </div>

With relative position, an html elements can move from it's normal position.Below is the example.

In this case it will move from it's postion 10px left and 10px below.

<div id='div2' style="  position: relative;left: 10px;top: 10px;">
<h2>This is a heading with an absolute position</h2>
</div>
Sheo Dayal Singh
  • 1,591
  • 19
  • 11
0

absolute is the best for doing the page layout. it should have the top left right and bottom imported by CSS. and the relative is done without any tag from CSS

madlymad
  • 6,367
  • 6
  • 37
  • 68
ghimire.prabin
  • 1
-1

The explanations and descriptions explained above are well but for a normal person or a beginner it is difficult to understand. Its simple.

Relative: Relative is similar to no positioning. Even if you haven,t used relative , and you make a div appear just like this:

margin-left:10px;

It would move to the left having space of 10px; And similarly if you do like this: position:relative;

margin-left:10px;

It would be same as no relative was used. And if absolute is used for some other div in same sequence: position:absolute;

margin-left:10px;

The it would move a total of 10+10=20px margin-left. Because 10px of the second div of absolute and 10 px of relative div id is added in it. It is similar to doing:

#div1{
float:left;
margin-left:10px;
} 
#div2{
float:left;
margin-left:10px;
}
olyv
  • 3,699
  • 5
  • 37
  • 67
Nadeem dar
  • 1
-1

In example shown:

well, for relative there is no top/bottom/left/right for relative, so it stays where it should stay. (body has its own margin and padding defined by browser, which you can override).

for absolute, we have top and left, so it goes a little up, as it ignore any other items.

Igoris Azanovas
  • 1,640
  • 1
  • 22
  • 37