代码
<link rel="stylesheet" href="css/style.css">
<title>我的网站</title>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<hr>
<div class="t"></div>
<div class="y"></div>
<hr>
<div class="father">
<div class="son">son</div>
</div>
<hr>
子绝父相的由来：
1.相对位置 占有位置，不脱标
2.绝对位置 不占有位置，完全不脱标
<hr>
<div class="p">
<img src="images/spzs.jpg" alt="" class="o">
<img src="images/hgds.jpg" alt="">
</div>
<hr>
<div class="m">
<div class="n"></div>
</div>
div {
width: 100px;
height: 100px;
background-color: pink;
top: 100px;/*边偏移*/
left: 100px;
position: absolute;/*定位模式（绝对定位）*/
/* 定位模式+边偏移=完整定位*/
position: static;/*定位模式：静态定位*/
/*静态定位，对于边偏移无效的*/
/* 一般他用来清除定位的*/
}
div:nth-child(2) {
width: 100px;
height: 100px;
background-color: purple;
position: relative;/*相对定位*/
left: 10px;
top: 20px;
}
.t {
width: 100px;
height: 100px;
background-color: pink;
/*position: absolute;*//*定位模式：绝对定位*/
/*top: 10px;*/
/*left: 10px;*/
/* 绝对定位完全脱标的，它不占优位置*/
}
.y {
width: 200px;
height: 200px;
background-color: purple;
}
.father {
width: 300px;
height: 300px;
background-color: pink;
margin: 100px;
position: relative;/*父级有定位的*/
}
.son {
width: 100px;
height: 100px;
background-color: purple;
position: absolute;/*根据子绝父相*/
top: 15px;
left: 15px;
/* 父亲没有定位，孩子以浏览器为基准点对齐*/
}
.p {
width: 800px;
height: 800px;
border: 5px solid pink;
margin: 100px;
padding: 5px;
position: relative;
}
.o {
position: absolute;
top: 0;
left: 0;
}
.m {
width: 800px;/*宽800像素*/
height: 400px;/*高400像素*/
background-color: pink;/*背景颜色*/
margin: 40px auto;/*上下40像素，左右居中*/
position: relative;
}
.n {
width: 100px;
height: 40px;
background-color: purple;
position: absolute;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -20px;
}
结果
image.png
image.png
image.png
image.png
