absolute绝对定位

absolute绝对定位

1.离它最近的
2.有定位属性的(相对,绝对)
3.父级(如果没有就依次往上找,最终以body为参照物)
4.虽然父级可相对可绝对但是父级一般设置为:相对定位
5.提升层级

<!1DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>TITLE</title>
<style>
.wrap{
width:500px;
height:500px;
background:red;
margin:200px auto;
}
.left{
width:200px;
height:200px;
background:blue;
position:absolute;
left:30px;
top:40px

}

</style>
<body>
<div class="wrap">
<div class="left">左边</div>
</body>
</html>

在这里插入图片描述
绝对定位定位偏移的参照物:
1.离它最近的
2.有定位属性的(相对,绝对)
3.父级(如果没有就依次往上找,最终以body为参照物)

希望以wrap为参照物:则给wrap加定位属性:
虽然父级可相对可绝对但是父级一般设置为:相对定位,占位置

.wrap{
width:500px;
height:500px;
background:red;
margin:200px auto;
position:relative;
}

在这里插入图片描述

发布了23 篇原创文章 · 获赞 3 · 访问量 1145

猜你喜欢

转载自blog.csdn.net/qq_34756221/article/details/104508399
今日推荐