元素的层级z-index:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绝对定位元素的布局</title>
<style>
.box1{
width: 500px;
height: 500px;
background-color: #7FFFD4;
position: relative;
}
.box2{
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
margin: auto;
/*
水平布局:
left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right
-当我们开启了绝对定位后:
水平方向的布局等式就需要添加left和right两个值
此时规则和之前一样只是多添加了两个值:
当发生过度约束时:
如果9个值中没有auto,则自动调整right值以使等式满足
如果有auto,则自动调整auto值以使等式满足
-可设置auto值:
margin width left right
其中left和right默认值为auto
垂直方向布局的等式也必须满足
top + margin-top/bottom + badding-top/bottom + border-top/bottom + bottom
*/
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>