在相对位置环绕周围使用绝对位置和在静态位置环绕周围使用绝对位置之间有什么区别吗？答案

【问题标题】：Is there any difference between using absolute position around a relative position wrap and an absolute position around a static position wrap?在相对位置环绕周围使用绝对位置和在静态位置环绕周围使用绝对位置之间有什么区别吗？
【发布时间】：2013-08-13 10:41:11
【问题描述】：

我只是想知道以不同方式使用它是否有任何区别，以及在相对位置环绕周围使用它有什么意义——尤其是如果主要目标是顶部属性？有人能告诉我在相对位置环绕周围使用它的主要目的是什么，比如在什么情况下这样做很重要？

这是我正在尝试的事情，我发现在相对位置和静态位置下使用绝对位置之间没有区别——我的意思是当涉及到“顶部”属性时。

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

【问题讨论】：

标签： css position

【解决方案1】：

如果您不将absolute 定位元素包裹在relatively 定位对象周围，则在您的视口中，顶部将是顶部，但如果您放大或缩小，它将是视口的顶部并且独立你的布局，天气relatively定位对象的情况下，如果absolute定位对象包裹在一个相对定位的对象周围，它将在relatively定位对象的边界下位于顶部。

例如，

让我们取三个div标签，如问题中提到的带有ID的box_1、box_2和box_3

让我们假设下面三个div's的CSS和HTML

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;
  }

HTML：

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

从上面的例子中，你可以看到box_2作为一个相对定位的div被作为一个父元素，分别包裹在box_1和box_3作为绝对位置和静态位置。发生的情况是，当相对定位的 div 包裹在绝对和静态定位的 div 周围时，内部子级包裹在父 div 周围并生成相对于其父级的位置。

WORKING DEMO

如果我们改变 HTML 如下，

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

现在，所有的 div 都是独立的，它们本身就是父级，所以所有的 div 都会根据它们的特性来表现。例如，绝对定位的 div 将独立于其原点，即视口，并且应独立于原点向左、向右、顶部和底部移动，而不是像第一个场景中那样根据相对定位的 div 的边界。静态 div 和相对 div 也是如此，它们会根据它们的特性来表现。

WORKING DEMO

我希望这会有所帮助。

【讨论】：

感谢您的回复，您能详细说明一下吗？我是新手，我几乎看不懂你说的。对不起！ :$
我猜这是详细说明 :) - @jennasalva
我真的不知道什么是视口。请你给我解释一下好吗？
@jennasalva 视口是浏览器窗口（可以理解为整个页面）
@jennasalva：或者更确切地说，视口是显示网页的浏览器窗口区域。

【解决方案2】：

在静态包装中绝对定位的对象将根据视口定位（或最近的绝对/相对定位的父对象）。

在绝对或相对包装器中绝对定位的对象将根据包装器定位。

【讨论】：