absolute vs relative CSS position

Question

A div with absolute position property.

<html>
<head><title></title>
<style type="text/css">
.mydiv
{
position:absolute;
background-color:red;
min-width:150px;
min-height:150px;
}
</style>
</head>
<body>
 <div class="mydiv"></div>
</body>
</html>

A div with relative position property.

<html>
<head><title></title>
<style type="text/css">
.mydiv
{
position:relative;
background-color:red;
min-width:150px;
min-height:150px;
}
</style>
</head>
<body>
 <div class="mydiv"></div>
</body>
</html>

when i have used absolute then it's ok.but with relative position the min-width of div does not work. please, explain the reason of difference output as we can understand the difference between absolute and relative position property.

I answered to your interesting thread [here](https://www.begueradj.com/min-dimention-absolute-relative.html#min-dimention-absolute-relative) — Billal Begueradj, Jan 29 '17 at 09:20

score 3 · Answer 1 · answered Jan 29 '17 at 06:00

Relative : Relative to it’s current position, but can be moved. Or A RELATIVE positioned element is positioned relative to ITSELF.

Absolute : An ABSOLUTE positioned element is positioned relative to IT'S CLOSEST POSITIONED PARENT. if one is present, then it works like fixed.....relative to the window.

Check demo

HTML

<div class="parent">
  <div class="mydiv"></div> 
</div>

CSS

.parent{
 width:150px;
 height:150px;
}
.mydiv
{
 position:relative;
 background-color:red;
 min-width:150px;
 min-height:150px;
}

Here, 2nd parent div position is relative so the middle div will changes it's position with respect to 2nd parent div. If 1st parent div position would relative then the Middle div would changes it's position with respect to 1st parent div.

Excellent answer! If one is not* present. – Hilla Shahrabani May 22 '19 at 08:18 — Hilla Shahrabani, May 22 '19 at 08:18
Thanks @HillaShahrabani :) – acmsohail May 23 '19 at 05:53 — acmsohail, May 23 '19 at 05:53

score 1 · Answer 2 · answered Jan 29 '17 at 05:50

According to reference "Absolute location is a place's exact spot on a map, while relative location is an estimate of where a place is in relation to other landmarks." What this means relative takes parent div into consideration but absolute is totally absolute. I have solution for your question to make you understand what this means.

    <html>
    <head><title></title>
    <style type="text/css">
    .mydiv
    {
    position:relative;
    background-color:red;
    min-width:150px;
    min-height:150px;
    }
     .container{
      width:150px;
      height:150px;
     }
    </style>
    </head>
    <body class="container">
    <div class="mydiv"></div>
    </body>
    </html>

thank you for your response,my question to you is that you will see in my second file min-height property has applied but not min-width.if relative position take parent div this is correct but why min-height property applied.is it should not apply as min-width becasue there is no parent div. — Rashed bin hares, Jan 29 '17 at 06:03

score 0 · Answer 3 · answered Jan 29 '17 at 05:58

Relative is very confusing and often misused. First you must understand that relative means that the position is relative to where the element would normally be. In order to use it correctly, and to even have an effect on the element you want to move, you must also add an position attribute.

For instance, say you want the object to move 10px down from where it normally would be. Then you would add: top: 10px; to the code. This would shift the object DOWN 10px from its original position.

So, your code would look like this:

 <html>
<head><title></title>
<style type="text/css">
.mydiv
{
position:relative;
top: 10px;
background-color:red;
min-width:150px;
min-height:150px;
}
</style>
</head>
<body>
 <div class="mydiv"></div>
</body>
</html>

That should help you understand the definition as well as it's use a little better. Good luck!

score 0 · Answer 4 · edited May 23 '17 at 11:45

0

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 (see note)

So, for height (and min-height) there is no difference, but for width, yes the relative element acts like as it has a 100% width.

<html>
<head><title></title>
<style type="text/css">
.mydiv
{
  position:relative;
  background-color:red;
  width:150px; /* default width is 100% for relative elements */
  min-height:150px;
}
</style>
</head>
<body>
 <div class="mydiv"></div>
</body>
</html>

edited May 23 '17 at 11:45

Community

1
1

answered Jan 29 '17 at 06:05

S.Serpooshan

7,608
4
33
61

1

whats your feedback? does it clear or any question? – S.Serpooshan Jan 29 '17 at 07:05
you have used width:150px; but i have used min-width:150px; – Rashed bin hares Jan 30 '17 at 07:27

absolute vs relative CSS position

4 Answers4