<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*
当position属性值为absolute时，开启绝对定位
绝对定位
开启绝对定位，会使元素脱离文档流
开启绝对定位之后，如果不设置偏移量，元素位置不会发生改变
绝对定位时相当于离其最近的祖先元素进行定位的(一般开启自元素怒绝对定位都会同时开启父元素相对定位)
所有祖先元素没有定位，则会根据浏览器窗口进行定位
绝对定位会使元素提升一个层级
绝对定位会改变元素的性质
内联元素变成块元素
块元素的宽高默认都被内容撑开
*/
position: absolute;
left: 0px;
top: 0px;
}
.box3{
width: 200px;
height: 200px;
background-color: yellowgreen
}
.box4{
width: 300px;
height: 300px;
background-color: orange;
position: relative;
}
.s1{
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box4">
<div class="box2"></div>
</div>
<div class="box3"></div>
<span class="s1">我是span</span>
</body>
</html>
当position属性值为absolute时，开启绝对定位
绝对定位
开启绝对定位，会使元素脱离文档流
开启绝对定位之后，如果不设置偏移量，元素位置不会发生改变
绝对定位时相当于离其最近的祖先元素进行定位的(一般开启自元素怒绝对定位都会同时开启父元素相对定位)
所有祖先元素没有定位，则会根据浏览器窗口进行定位
绝对定位会使元素提升一个层级
绝对定位会改变元素的性质
内联元素变成块元素
块元素的宽高默认都被内容撑开