Question

因此，使用下面的代码，当我更改条形边距时，foo的位置会发生变化。但这只发生在身体相对定位时。如果我静态定位身体，那么foo的位置不再取决于条形边缘。谁能告诉我发生了什么事？

<!DOCTYPE html>
<html>
 <head>
  <style type="text/css">
   * {
    margin:0;
   }

   body {
    position:relative;
   }

   #foo {
    position:absolute;
    top:50px;
    left:50px;
   }

   #bar {
    margin:100px;
   }
  </style>
 </head>
 <body>
  <div id="foo">asdf</div>
  <div id="bar">asdf</div>
 </body>
</html>

Answer 1

绝对定位的元素由它们最接近的绝对或相对定位的父级锚定。

编辑：为了更清楚地了解保证金，请参阅下面的评论。

EDIT2：这也适用于具有固定位置的元素。

Answer 2

Jrod钉了它，默认定位始终在浏览器窗口的左上角。默认情况下，定位是相对的，因为添加的每个元素（子项）都将遵循这些相同的准则。

你已经给出了#foo坐标，而你给予的所有#bar都是与身体的相对关系中要遵循的边距。

为什么相对定位的身体影响绝对定位元素？

2 个答案: