一、定位的基本概念
在我们浏览网页的过程中，经常会发现网页中的元素重叠展示，例如一个列表压在了一张图片之上，或者浏览器右下角突然弹出的广告压到了其他元素之上，这些都需要使用css的定位才能实现，本节我们就讲解css定位相关的属性，定位可以分为三类:
绝对定位
相对定位
固定定位
二、css定位详解
我们可以通过position属性，将一个元素设置成定位元素，之后就可以通过top、left、bottom、right属性来设置元素的坐标。
绝对定位
将一个元素设置下面的属性：
1element{2 position:absolute;3}
元素就变成了一个绝对定位元素，实例代码如下所示。
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>Document</title> 6<style> 7 .box{ 8 width:100px; 9 height:100px;10 background-color: #f00;11 border:1px solid #0f0;12}13 .pos{14 position: absolute;/*设置绝对定位元素*/15 top:50px;16 left:50px;17}18</style>19</head>20<body>21<!-- 一个元素可以设置多个class属性，用空格区分开 -->22<div class="box">1</div>23<div class="box pos">2</div>24<div class="box">3</div>25</body>26</html>
从上面代码的效果中，我们可以了解以下几点：
绝对定位元素脱离文档流，并不占位，第一个div和第三个div相邻。
原点在整个网页左上角的位置。
定位的坐标分别是top:50px;left:50px;这个值是元素左上角距离原定的距离。
相对定位
将一个元素设置下面的属性：
1element{2 position:relative;3}
元素就变成了一个相对定位元素，实例代码如下所示。
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>Document</title> 6<style> 7 .box{ 8 width:100px; 9 height:100px;10 background-color: #f00;11 border:1px solid #0f0;12}13 .pos{14 position: relative;/*设置相对定位元素*/15 top:50px;16 left:50px;17}18</style>19</head>20<body>21<div class="box">1</div>22<div class="box pos">2</div>23<div class="box">3</div>24</body>25</html>
从上面代码的效果中，我们可以了解以下几点：
相对定位元素不脱离文档流，元素占位，第一个div和第三个div不相邻，中间的间距就是相对定位元素的位置。
原点在其占位位置的左上角。
定位的坐标分别是top:50px;left:50px;这个值是元素左上角距离原定的距离。
固定定位
将一个元素设置下面的属性：
1element{2 position:fixed;3}
元素就变成了一个固定定位元素，实例代码如下所示。
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>Document</title> 6<style> 7 body{ 8 height:1000px; 9}10 .box{11 width:100px;12 height:100px;13 background-color: #f00;14 border:1px solid #0f0;15}16 .box2{17 position: fixed;/*设置固定定位元素*/18 top:50px;19 left:50px;20}21</style>22</head>23<body>24<div class="box box1">1</div>25<div class="box box2">2</div>26<div class="box box3">3</div>27</body>28</html>
从上面代码的效果中，我们可以了解以下几点：
固定定位元素脱离文档流，并不占位，第一个div和第三个div相邻。
我们将body元素的高度设置成1000px，这样我们就可以通过滚轮控制网页显示的位置。
原点在浏览器当前窗口的左上角。
定位的坐标分别是top:50px;left:50px;这个值是元素左上角距离原定的距离。
当混轮滚动的时候，固定定位元素永远相对于窗户的位置定位。
设置参照物
理解了上面三种定位方法，我们再来考虑开始提到的那个问题，如果我们希望将一个数字列表压在一张图片之上。居中显示在网页之上，我们将数字列表设置定位之后，坐标应该设置成多少呢？因为居中的图片与浏览器窗口的左边距是不固定的，所以没有办法设置成一个固定值，这个时候，我们就需要给定位元素设置参照物。
将父级元素设置定位元素，那么子级元素定位的坐标原点会设置为父级元素左上角的位置。代码如下所示。
1<div class="container">2<div class="box"></div>3</div>
1 .container{ 2 width:300px; 3 height:300px; 4 border:1px solid blue; 5 position: relative;; 6 top:100px; 7 left:100px; 8} 9.box{10 border:blue 4px solid;11 width:100px;12 height:100px;13 position:absolute;14 top:10px;15 left:20px;16}
父级容器不管是绝对定位，相对定位还是固定定位，都可以实现作为参照物的效果，在实际项目开发中，常用方法如下所示：
如果父级元素不脱离文档流，参与正常排版，那么父级设置相对定位。
如果父级需要根据视窗的显示位置而变化位置，可以设置固定定位。
一般父级容器不设置绝对定位。
注意事项
大家掌握了定位之后会发现一个问题，那就是只要我么使用定位，就可以实现所有的网页效果，再也不需要浮动布局，也不用管网页的树状结构了。
这样做其实是不可以的，在制作网页的过程中，我们不仅要将元素放在指定的位置，还要考虑网页的后续可维护性，已经针对不同屏幕尺寸的适应能力。因此，定位是我们实现网页布局的最后手段。多于一个新手来说，能不用定位来实现的布局，都不要用定位来实现。
三、课后练习
完成融职教育右侧返回顶部的悬浮效果。
制作一个在图片上显示图标描述文字的效果，并且图片再网页右下角显示。
制作一个标题效果，让标题左右两边各带一个横线（使用伪元素和定位来实现）。
网友评论