<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
/*
* position: absolute开启了绝对定位
* 1.绝对定位参照物是相对于离它最近的开启了定位的祖先元素进行便宜
* 如果他的祖先元素没有定位 会根据当前窗口浏览器进行定位
*/
.box{
width: 200px;
height: 200px;
background-color: red;
float: left;
margin-left: 10px;
}
.box1{
width: 300px;
height: 300px;
clear: both;
background-color: blue;
position: relative;
}
.box2{
width: 50px;
height: 50px;
background-color: #808080;
position: absolute;
left: 30px;
top: 30px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box1">
<div class="box2"></div>
</div>
</div>
</body>
</html>
这是在有祖先元素.box1开启定位后成为box2的祖先元素
棕色方块以祖先元素为参照物如果没有设置box1定位就会根据当前浏览器定位效果如下
