代碼
<link rel="stylesheet" href="css/style.css">
<title>我的網(wǎng)站</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;/*定位模式：靜態(tài)定位*/
/*靜態(tài)定位说榆，對于邊偏移無效的*/
/* 一般他用來清除定位的*/
}
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ōu)位置*/
}
.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;/*根據(jù)子絕父相*/
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;
}
結(jié)果
image.png
image.png
image.png
image.png
