题解 | #定位 - absolute#
定位 - absolute
http://www.nowcoder.com/practice/4a7cd2e295604c5ca30380b61506208b
绝对定位会把元素拿出文档流,不会再占据原来的空间。绝对定位元素的父级是距离该元素最近的定位祖先,也就是"position"属性不为"static"的最近任意祖先。如果没有这个定位祖先,那么绝对定位元素就相对于文档的根元素"html"进行定位。
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.outer {
width: 100px;
height: 100px;
padding-left: 10px;
background: red;
}
.middle {
position: absolute;
width: 100px;
height: 100px;
padding-left: 10px;
background: blue;
}
.inner {
position: absolute;
left: 0px;
width: 100px;
height: 100px;
padding-left: 10px;
background: yellow;
}
</style>
</head>
<body>
<div class="outer">
<div class="middle">
<div class="inner">
</div>
</div>
</div>
</body>
</html>