Css 在相对位置环绕使用绝对位置和在静态位置环绕使用绝对位置之间有什么区别吗？_Css_Position

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

css

Css 在相对位置环绕使用绝对位置和在静态位置环绕使用绝对位置之间有什么区别吗？,css,position,Css,Position,我只是想知道以不同的方式使用它是否有任何区别，以及围绕相对位置换行使用它的意义是什么——特别是如果主要目标是top属性？有人能告诉我在相对位置环绕时使用它的主要目的是什么，比如在什么情况下这样做很重要这是我一直在尝试的东西，我发现在相对位置下使用绝对位置和在静态位置下使用绝对位置没有区别——我的意思是当涉及到“top”属性时 <head> <style> #box_1 { position: static; width: 200px; height: 100px;

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

这是我一直在尝试的东西，我发现在相对位置下使用绝对位置和在静态位置下使用绝对位置没有区别——我的意思是当涉及到“top”属性时

<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{
位置：静态；
宽度：200px；
高度：100px；
背景：黄色；
}
#框2{
位置：相对位置；
宽度：700px；
高度：60px；
背景：红色；左侧：300px；
}
#方框3{
位置：绝对位置；
宽度：700px；
高度：60px；
背景：黑色；左侧：200px；顶部：300px；
}
#方框4{
位置：绝对位置；
宽度：700px；
高度：60px；
背景：绿色；左侧：200px；顶部：300px；
}

如果您没有将

绝对

定位元素包裹在

相对

定位对象周围，则在视口中，顶部将是顶部，但如果您放大或缩小，它将是视口顶部，且与布局无关，如果

相对

定位对象，如果

绝对

定位对象环绕相对定位对象，则它将位于

相对

定位对象边界的顶部

例如，

让我们以问题中提到的带ID的三个

div

标记、

box\u 1

、

box\u 2

和

box\u 3

让我们假设以下三个

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

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

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都是独立的，它们本身就是父类，因此将发生的是所有div都将根据它们的特性进行操作。例如，绝对定位的div将独立于其原点（即视口），并应独立于原点向左、向右、顶部和底部移动，而不是按照第一种场景中相对定位div的边界移动。静态和相对div也是如此，它们将根据各自的特性进行操作

我希望这会有所帮助。
静态包装中绝对定位的对象将基于视口（或最近绝对/相对定位的父对象）定位
绝对位于绝对或相对包装中的对象将基于包装进行定位
谢谢您的回复，但您能详细说明吗？我是新手，几乎听不懂你说的话。对不起$我猜这是精雕细琢：）-@jennasalvaI真的不知道视口是什么。你能给我解释一下吗？@jennasalva视口是浏览器窗口（你可以把它理解为整个页面）@jennasalva：或者说，视口是浏览器窗口中显示网页的区域。