Is there any difference between using absolute position around a relative position wrap and an absolute position around a static position wrap?

问题

I was just wondering if there is any difference between using it in different ways and what is the point of using it around a relative position wrap -- especially if the main target is the top property? Can someone tell me what is the main purpose(s) of using it around a relative position wrap, like in what cases it is important to do so?

Here is something that I was trying and I find no difference between using absolute position under a relative and under a static position -- I mean when it comes to "top" property.

<head>
<style>
 #box_1 { 
position: static;
width: 200px;
height: 100px;
background: yellow;
   }

 #box_2 { 
position: relative;
width: 700px;
height: 60px;
background: red; left:300px;
   }

 #box_3 { 
position: absolute;
width: 700px;
height: 60px;
background: black; left:200px; top: 300px;
  }
 #box_4 { 
position: absolute;
width: 700px;
height: 60px;
background: green; left:200px; top: 300px;
  }
</style>

</head>
<body>
<div id="box_1">
<div id="box_2">
<div id="box_3">
</div>
</div>
<div id="box_4">
</div>
</div>

</body>

回答1:

If you don't wrap an absolute positioned element around a relatively positioned object, in your viewport, top will be top, but if you zoom in or zoom out, it will be top of the viewport and independent of your layout, weather in case of relatively positioned objects, if an absolute positioned object is wrapped around a relatively postioned object, it will be on top under the bounds of the relatively positioned object(s).

For Instance,

Let us take three div tags as mentioned in the question with ids, box_1, box_2 and box_3

Let us assume the below CSS and HTML for the three div's

The CSS:

#box_1 { 
position: static;
width: 200px;
height: 100px;
background: yellow;
    top:0px; left:0px;
   }

 #box_2 { 
position: relative;
width: 1000px;
height: 100px;
background: red;
   }

 #box_3 { 
position: absolute;
width: 200px;
height: 100px;
background: black; right:0px; top: 0px;
  }

The HTML:

<div id="box_2">
    <div id="box_1"></div>
    <div id="box_3"></div>
</div>

From the above example, you can see that box_2 being a relatively positioned div is taken as a parent and wrapped around the box_1 and box_3 as absolute and static positions respectively. What happens, is that when the relatively positioned div is wrapped around the absolute and static positioned divs, the inner child wrap around the parent div and generate positions relative to their parent.

WORKING DEMO

If we change the HTML as below,

<div id="box_1"></div>
<div id="box_2"></div>
<div id="box_3"></div>

As now, all the divs are independent are are parent in itself, so what will happen is that all the div will behave according to their characteristics. for instance, the absolutely positioned div will be independent of its origin i.e the viewport and shall move left, right, top and bottom independent of origin and not according to the bounds of relatively positioned div as in the first scenario. Same goes for static and relative div which will behave according to their characteristics.

WORKING DEMO

I hope this helps.

回答2:

An object positioned absolutely within a static wrapper will be positioned based on the viewport (or closest absolutely/relatively positioned parent).

An object positioned absolutely within an absolute or relative wrapper will be positioned based on the wrapper.

来源：https://stackoverflow.com/questions/18206951/is-there-any-difference-between-using-absolute-position-around-a-relative-positi

标签

css

position