目录
效果
代码
<html>
<head>
<title>测试position</title>
<style>
body{
margin: 0;
padding: 0;
background: #5e5e5e;
}
.parent1 {
position: relative;
width: 500px;
height: 300px;
top: 30%;
left: 20%;
border-color: black;
border:5px;
margin: 15px;
background-color: red;
}
.child1 {
position: relative;
width:200px;
height:200px;
top: 15%;
left: 5%;
background-color: blue;
}
.child2 {
position: relative;
width:200px;
height:200px;
top: -50%;
right: -50%;
background-color: green;
}
.child3 {
position: relative;
width:20px;
height:10px;
bottom: 0%;
background-color: green;
z-index: 100;
}
.parent2 {
position: relative;
width: 500px;
height: 300px;
left: 10%;
border-color: black;
border:5px;
background-color: red;
}
</style>
</head>
<body>
<div class="parent1" > 这是一个大盒子
<div class="child1" text-align="right-side" >child 1 </div>
<div class="child2" text-align="middle" >child 2</div>
<div class="child3">222</div>
</div>
<div class="parent2">
one other 大盒子
</div>
one other 大盒子3
</body>
</html>参考文档
Absolute（绝对定位）与relative（相对定位）的图文讲解_absolute定位_每天进步一点点呀的博客-CSDN博客