删除其父包装元素的属性“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的{​​{1}}属性为#footer。

这意味着，对于具有相对位置的第一个父级（在这种情况下为absolute）

，它将具有绝对位置

如果没有父母拥有此属性，那么<div id="wrapper">

将是绝对的