理解css盒模型以及三种定位的区别

最新推荐文章于 2022-09-13 19:35:00 发布

zhanghaibing0903

最新推荐文章于 2022-09-13 19:35:00 发布

阅读量478

点赞数

本文链接：https://blog.csdn.net/zhanghaibing0903/article/details/40020533

版权

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta chatset="utf-8">
<style type="text/css">
.d1{
width: 500px;
height: 500px;
border: solid red 1px;
}
.d2{
width: 400px;
height: 400px;
border: solid blue 1px;
margin-left: 88px;
margin-top: 88px;
position: absolute;
}
.d3{
width: 300px;
height: 300px;
border: solid green 1px;
margin-left: 88px;
margin-top: 88px;
}
.box1{
width: 100px;
height: 100px;
background-color: #bbb;
/*position: relative;
top: -89px;
left: -89px;*/
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
top: 0px;
left: 0px;
}
.box3{
width: 100px;
height: 100px;
background-color: #faa;
position: fixed;
top: 9px;
left: 9px;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">
<div class="d3">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
</div>
</div>
</body>
</html>