[华为云WEB前端全栈成长计划]十一、CSS定位
【摘要】 定位属性使用来设置元素在页面中的位置，我们使用CSS就是为了让页面美观，布局更好，仅仅使用浮动是不够的，所以今天学习定位属性。
定位属性使用来设置元素在页面中的位置，我们使用CSS就是为了让页面美观，布局更好，仅仅使用浮动是不够的，所以今天学习定位属性。
定位属性
先来看看static和fixed
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定位</title>
<style>
.div1{
width: 500px;
height: 2000px;
border: 1px solid red;
}
.static{
position: static;
width: 200px;
height: 200px;
background-color: yellow;
}
.fixed{
position: fixed;
width: 200px;
height: 200px;
background-color: gray;
}
</style>
</head>
<body>
<div class="div1">
<div class="static"></div>
<div class="fixed"></div>
</div>
</body>
</html>效果：
滚动滚动条
黄色块已经即将被掩盖，而灰色随着滚动条不断变化位置。这就是static和fixed的却别。
相对定位
值元素相对之前默认的位置，进行相对的移动，经常和位置一起使用。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定位</title>
<style>
.box1{
position: relative;
left: 100px;
background-color: yellow;
width: 100px;
height: 50px;
}
.box2{
left: 100px;
background-color: red;
width: 100px;
height: 50px;
}
.box3{
position: relative;
left: 100px;
background-color: gray;
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>效果：
绝对定位
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定位</title>
<style>
.box1{
height: 50px;
background-color: yellow;
}
.box2{
height: 50px;
background-color: red;
}
.box3{
height: 50px;
background-color: gray;
}
.box4{
height: 50px;
background-color: yellow;
}
.box5{
position: absolute;
height: 50px;
background-color: red;
}
.box6{
height: 50px;
background-color: gray;
}
.box7{
height: 50px;
background-color: yellow;
}
.box8{
position: absolute;
height: 50px;
background-color: red;
}
.box9{
position: absolute;
height: 50px;
background-color: gray;
}
.box10{
height: 50px;
background-color: yellow;
}
.box11{
position: absolute;
height: 50px;
background-color: red;
z-index: 1;
}
.box12{
position: absolute;
height: 50px;
background-color: gray;
}
</style>
</head>
<body>
<div class="box1">AAAA</div>
<div class="box2">BBBB</div>
<div class="box3">CCCC</div>
<hr />
<div class="box4">AAAA</div>
<div class="box5">BBBB</div>
<div class="box6">CCCC</div>
<hr />
<div class="box7">AAAA</div>
<div class="box8">BBBB</div>
<div class="box9">CCCC</div>
<hr />
<div class="box10">AAAA</div>
<div class="box11">BBBB</div>
<div class="box12">CCCC</div>
<hr />
</body>
</html>截图：
其中z-index属性进行设置层级，我们可以看到后面两个，灰色和红色覆盖情况。
与此同时，注意看横线的位置，发现，当B和C都设置了绝对定位后，产生了元素塌陷。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定位</title>
<style>
/*.fat{
position: absolute;
height: 300px;
width: 300px;
background-color: yellow;
}
.son{
width: 100px;
height: 100px;
background-color: red;
}*/
/*.fat1{
height: 300px;
width: 300px;
background-color: yellow;
}
.son1{
width: 100px;
height: 100px;
position: absolute;
top: 0px;
background-color: red;
}*/
.gra2{
padding: 50px;
background-color: pink;
}
.fat2{
position: absolute;
/*position: relative;*/
height: 300px;
width: 300px;
background-color: yellow;
}
.son2{
width: 100px;
height: 100px;
position: absolute;
top: 0px;
left: 0px;
background-color: red;
}
</style>
</head>
<body>
<!--<div class="fat">
<div class="son"></div>
</div>-->
<!--
<div class="fat1">
<div class="son1"></div>
</div>-->
<div class="gra2">
<div class="fat2">
<div class="son2"></div>
</div>
</div>
</body>
</html>这一个读者可以利用注释来显示不同的效果，探索绝对定位的作用。
注意元素塌陷，绝对定位和相对定位。
以及主要关注绝对定位是相对谁来说，一般来说如果父元素没设置为绝对或者相对元素，那么就是相对body元素进行设置。
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论（0）