Question

有一个div container，其中包含2个黄色和绿色的框。绿框位于黄框下方。当我们使用顶部和底部相对于容器移动黄色框时，它会在不干扰绿色框位置的情况下移动。但是，当我们使用顶部和底部Absolutely将黄色框移动到容器时，绿色框也会向上移动。为什么绿框的位置改变了？

JSFiddle Output

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

Answer 1

您将在https://developer.mozilla.org/en-US/docs/Web/CSS/position

中找到答案

但是，绝对定位的元素的计算位置是相对于父元素或元素所在元素的边缘的特定偏移量。它不遵循其他元素的规则，就像您将其从其他元素的流中伸出来一样。

另一方面，相对定位的对象最令人困惑。它的意思是“相对于自身”，但其位置受流程中其他元素的影响。

因此，绿色框实际上正在移动，因为您正在从“景观”中删除黄色框。

希望有帮助！

Answer 2

RELATIVE定位的元素位于relative to ITSELF。

设置位置相对的元素的top，right，bottom和left属性将导致将其调整为偏离其正常位置。其他内容将不会进行调整以适合元素所留的任何空隙。

This <div> element has position: relative;

相对于IT CLOSEST POSITIONED PARENT.定位绝对定位元素（如果存在的话），则它的工作方式类似于固定........相对于窗口。

但是；如果绝对定位的元素没有祖先，它将使用文档正文，并随页面滚动一起移动。

为进一步了解您可以访问 https://www.w3schools.com/css/css_positioning.asp

当元素y处于绝对位置时，为什么元素x下方的另一个元素y向上移动

2 个答案: