当元素y有绝对位置时，为什么下面的元素x上移到另一个元素y
有一个包含黄色和绿色两个盒子的div container。绿色的盒子就在黄色盒子的下面。当我们使用顶部和底部相对于容器移动黄色框时，它移动时不会干扰绿色框的位置。但是，当我们使用顶部和底部的Absolutely将黄色框移动到容器时，绿色框也会向上移动。为什么绿盒子的位置改变了？
.box {
width:100px;
height:100px;
}
.container {
width:500px;
height:500px;
position:relative;
background: #333;
}
#box-1 {
position: relative;
top: 50px;
left:50px;
background: red;
}
#box-2 {
position: absolute;
/* position: relative; */
top:100px;
left:100px;
background: yellow;
}
#box-3 {
background: green;
}
#box-4 {
background: blue;
}
#box-5 {
background: orange;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
</style>
</head>
<body>
<div id="box-1" class="box"></div>
<div class="container">
<div id="box-2" class="box"></div>
<div id="box-3" class="box"></div>
</div>
<div id="box-4" class="box"></div>
<div id="box-5" class="box"></div>
</body>
</html>
回答 2
Stack Overflow用户
发布于 2019-04-20 06:16:59
你会在这里找到你的答案https://developer.mozilla.org/en-US/docs/Web/CSS/position
但是，当一个元素被绝对定位时，它的计算位置是相对于父元素或该元素所定位到的元素的边缘的特定偏移。它不遵循其他元素的规则，就像你把它从其他元素的流动中伸出一样。
另一方面，相对定位的对象是最容易混淆的。它的意思是“相对于自身”，但它的位置受流程中其他元素的影响。
因此，绿色框实际上是在移动，因为您正在从“景观”中删除黄色框。
希望它能帮上忙！
Stack Overflow用户
发布于 2019-04-20 18:30:12
相对定位的元素定位为relative to ITSELF。
设置相对定位的元素的top、right、bottom和left属性将使其偏离正常位置。其他内容将不会调整以适应元素留下的任何间隙。
This <div> element has position: relative;绝对定位的元素是相对于it的CLOSEST POSITIONED PARENT.定位的。如果存在这样的元素，那么它就像窗口的fixed.....relative一样工作。
但是，如果绝对定位的元素没有定位的祖先，它将使用文档正文，并随页面滚动一起移动。
如需进一步了解，请访问https://www.w3schools.com/css/css_positioning.asp
https://stackoverflow.com/questions/55767082
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号