0

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

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

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

2 回答 2

1

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

例如，

让我们使用div问题中提到的三个标签，分别是 ids box_1、box_2和box_3

让我们假设这三个的 CSS 和 HTMLdiv's

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 周围并生成相对于其父级的位置。

工作演示

如果我们如下更改 HTML，

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

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

工作演示

我希望这有帮助。

于 2013-08-13T10:44:00.433 回答
0

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

绝对定位在绝对或相对 wrapper内的对象将根据 wrapper 定位。

于 2013-08-13T10:46:46.967 回答