当元素y具有绝对位置时，为什么元素x低于另一个元素y向上移动

问题描述 投票：0回答：2

有一个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>
html css html5 css-position
2个回答
0
投票

你会在这里找到你的答案https://developer.mozilla.org/en-US/docs/Web/CSS/position

但是，元素在绝对定位时的计算位置是与父元素的边缘或该元素所在的元素的特定偏移量。它不遵循其他元素的规则，就像你从其他元素的流动中解脱出来一样。

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

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

希望能帮助到你！

0
投票

RELATIVE定位元素位于relative to ITSELF。

设置相对定位元素的顶部，右侧，底部和左侧属性将使其远离其正常位置进行调整。其他内容不会被调整以适应元素留下的任何空白。

This <div> element has position: relative;

ABSOLUTE定位元素相对于IT's CLOSEST POSITIONED PARENT.定位（如果存在），那么它相对于窗口就像固定.....一样工作。

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.