html - 为什么在删除其父包装元素的属性 "position:relative"时页脚元素位置错误

Question

我尝试制作一个底部始终带有页脚元素的 html 页面，我遵循了这个 article一切都很完美。

但我发现，如果我从 CSS 类“wrapper”中删除属性“position:relative”，页脚的位置就会错误，如下图所示。

因为我对CSS不是很熟悉，我想知道为什么在这种情况下需要“position:relative”。

source - JSFiddle

CSS:

html,
body {
	margin:0;
	padding:0;
	height:100%;
}
#wrapper {
	min-height:100%;
    position:relative;
}
#header {
	background:#ededed;
	padding:10px;
}
#content {
	padding-bottom:100px; /* Height of the footer element */
}
#footer {
	background:#ffab62;
	width:100%;
	height:100px;
	position:absolute;
	bottom:0;
	left:0;
}

<div id="wrapper">
		<div id="header">
		</div><!-- #header -->
		<div id="content">
            <script>
                for (var i=0; i<=100; i++) {
                    document.write("<p>line " + i + "</p>");
                }
            </script>
		</div><!-- #content -->
		<div id="footer">
		</div><!-- #footer -->
</div><!-- #wrapper -->

Answer 1

因为属性position的 #footer是absolute .

这意味着，相对于将具有相对位置的第一个父级(在本例中为 <div id="wrapper">)，它将具有绝对位置

如果没有 parent 拥有这个属性，它将是关于 body 的绝对值