web前端

最新推荐文章于 2024-09-29 22:06:17 发布

阿丽学编程

最新推荐文章于 2024-09-29 22:06:17 发布

阅读量50

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/weixin_47494402/article/details/127045476

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style>
.box1 {
/* 相对位置相对标准流（原来的盒子）*/
position: relative;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background-color: aqua;
}

.box2 {
width: 200px;
height: 200px;
background-color: pink;
}
/* 1.绝对定位，以浏览器为标准 */
/* 2.若父盒子有定位，则子盒子以父盒子为准 */
/* 3.绝对定位脱标的不占有原来位置 */
.ye {
position: relative;
width: 400px;
height: 400px;
background-color: rebeccapurple;
padding: 50px;
}
.father {
position: relative;
width: 200px;
height: 200px;
background-color: pink;
}
.son {
position: absolute;
left: 0px;
bottom: 0;
width: 50px;
height: 50px;
background-color: skyblue;

}

</style>
   </head>
   <body>
       <div class="box1"></div>
<div class="box2"></div>

<div class="ye">
<div class="father">
<div class="son">
</div>
</div>
</div>
   </body>
</html>