效果图:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210305001408205.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUyNTEyOTM4,size_16,color_FFFFFF,t_70)
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单的html加css样式</title>
<style>
.square {
width: 300px;
height: 300px;
background: bisque;
z-index: 1;
display: inline-block;
}
.square1 {
width: 100px;
height: 100px;
background: #1104c7;
z-index: 2;
display: inline-block;
position: relative;
top: -200px;
left: -305px;
}
.square2 {
width: 100px;
height: 100px;
background: red;
z-index: 2;
display: inline-block;
position: relative;
left: -410px;
}
.square3 {
width: 100px;
height: 100px;
background: cyan;
z-index: 2;
display: inline-block;
position: relative;
left: -315px;
}
.square4 {
width: 100px;
height: 100px;
background: #fff0f5;
z-index: 2;
display: inline-block;
position: relative;
left: -520px;
top: -100px;
}
.square5 {
width: 100px;
height: 100px;
background: #d24574;
z-index: 2;
display: inline-block;
position: relative;
left: -525px;
top: -200px;
}
</style>
</head>
<body>
<div class="square"></div>
<div class="square1"></div>
<div class="square2"></div>
<div class="square3"></div>
<div class="square4"></div>
<div class="square5"></div>
</body>
</html>