Why does relatively positioning the body influence absolutely positioned elements?
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 of foo no longer depends on the margin of bar. Can anyone tell me what's going on?
<!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.
加载中,请稍侯......
精彩评论