1、绝对定位:absolute
脱离文档流,不保留原先位置
1、如果有祖先定位元素 ,则根据最近的祖先定位元素((position:absolute) 重点 要 有定位元素)进行定位
2、如果没祖先定位元素,相对于视口区域进行定位
如果没有定位属性则在原来位置定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绝对定位-父元素</title>
<style>
*{
padding: 0;
margin: 0;
}
.parent1{
width: 600px;
height: 600px;
background-color: rgb(126, 3, 3);
padding: 100px;
box-sizing: border-box;
/* border: 1px solid black; */
/* position: relative; */
}
.parent2{
width: 400px;
height: 400px;
background-color: blue;
/* margin: 100px;
border: 1px solid black; */
padding: 100px;
box-sizing: border-box;
/* position: relative; *//* 相对定位对文档影响最小 */
}
.child{
width: 200px;
height: 200px;
background-color: blueviolet;
/* position: absolute;
top: 10px;
left: 10px; */
}
.static{
width: 100px;
height: 100px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="parent1">
<div class="parent2">
<div class="child"></div>
</div>
</div>
<div class="static">其他的元素</div>
</body>
</html>
居中方案总结
1.padding: 100px;
box-sizing: border-box; 因为为内容盒子 w3c盒子的宽为width+padding会撑大盒子,所以这儿换位ie盒子
2.、margin: 100px;
border: 1px solid black;