Question

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

这是我正在尝试的东西，我发现在相对位置和静态位置下使用绝对位置没有区别 - 我的意思是指“顶级”属性。

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

Answer 1

如果您未在absolute定位对象周围包裹relatively定位元素，则在您的视口中，top将位于顶部，但如果您放大或缩小，它将是在视口的顶部并且与您的布局无关，在relatively定位对象的情况下天气，如果absolute定位的对象缠绕在相对位置的对象周围，它将位于{{1}的边界之上{1}}定位对象。

对于实例，

让我们根据ID relatively，div和box_1

提出问题中提到的三个box_2代码

让我们假设以下三个box_3

的CSS和HTML

CSS：

div's

HTML：

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

从上面的示例中，您可以看到<div id="box_2"> <div id="box_1"></div> <div id="box_3"></div> </div>是一个相对定位的div被视为父级，并分别围绕box_2和box_1作为绝对和静态位置。会发生什么，当相对定位的div缠绕在绝对和静态定位的div上时，内部子包围父div并生成相对于其父级的位置。

<强> WORKING DEMO

如果我们更改HTML，如下所示

box_3

就像现在一样，所有的div都是独立的，它们本身就是父类，所以会发生的是所有的div都会根据它们的特性来表现。例如，绝对定位的div将独立于其原点，即视口，并且应独立于原点而向左，向右，向上和向下移动，而不是如第一种情况中那样根据相对定位的div的界限。静态和相对div也是如此，它们将根据其特性表现出来。

<强> WORKING DEMO

我希望这会有所帮助。

Answer 2

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

绝对位于绝对或相对包装内的对象将根据包装器定位。

使用相对位置换行周围的绝对位置和静态位置换行周围的绝对位置之间有什么区别吗？

2 个答案: