Why does relatively positioning the body influence absolutely positioned elements?_问答_开发者

Why does relatively positioning the body influence absolutely positioned elements?

开发者 https://www.devze.com 2023-03-12 15:54 出处：网络

So with the code below, when I change the margin of bar, the position of foo changes. But this only happens when the body is relatively positioned. If I statically position the body, then the position

相关专题：css

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

   body {
    position:relative;
   }

   #foo {
    position:absolute;
    top:50px;
    le开发者_StackOverflowft:50px;
   }

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

Absolutely positioned elements are anchored by their closest absolutely, or relatively positioned parent.

EDIT: For added clarity about the margin please see my comment below.

EDIT2: This also applies to elements with a fixed position.

Jrod nailed it, the default positioning is always top left of the browser window. By default positioning is Relative, for every element added (children) will follow these same guidelines.

You have given #foo coordinates to follow whereas all you have given #bar is a margin to follow in Relative relation to the Body.