【融职培训】Web前端学习 第2章 网页重构9 css定位

一、定位的基本概念

在我们浏览网页的过程中，经常会发现网页中的元素重叠展示，例如一个列表压在了一张图片之上，或者浏览器右下角突然弹出的广告压到了其他元素之上，这些都需要使用css的定位才能实现，本节我们就讲解css定位相关的属性，定位可以分为三类:

绝对定位

相对定位

固定定位

二、css定位详解

我们可以通过position属性，将一个元素设置成定位元素，之后就可以通过top、left、bottom、right属性来设置元素的坐标。

绝对定位

将一个元素设置下面的属性：

1element{2    position:absolute;3}

元素就变成了一个绝对定位元素，实例代码如下所示。

1 2 3 4 5 619202122

1

23

2

24

3

2526

从上面代码的效果中，我们可以了解以下几点：

绝对定位元素脱离文档流，并不占位，第一个div和第三个div相邻。

原点在整个网页左上角的位置。

定位的坐标分别是top:50px;left:50px;这个值是元素左上角距离原定的距离。

相对定位

将一个元素设置下面的属性：

1element{2    position:relative;3}

元素就变成了一个相对定位元素，实例代码如下所示。

1 2 3 4 5 6192021

1

22

2

23

3

2425

从上面代码的效果中，我们可以了解以下几点：

相对定位元素不脱离文档流，元素占位，第一个div和第三个div不相邻，中间的间距就是相对定位元素的位置。

原点在其占位位置的左上角。

定位的坐标分别是top:50px;left:50px;这个值是元素左上角距离原定的距离。

固定定位

将一个元素设置下面的属性：

1element{2    position:fixed;3}

元素就变成了一个固定定位元素，实例代码如下所示。

1 2 3 4 5 6222324

1

25

2

26

3

2728

从上面代码的效果中，我们可以了解以下几点：

固定定位元素脱离文档流，并不占位，第一个div和第三个div相邻。

我们将body元素的高度设置成1000px，这样我们就可以通过滚轮控制网页显示的位置。

原点在浏览器当前窗口的左上角。

定位的坐标分别是top:50px;left:50px;这个值是元素左上角距离原定的距离。

当混轮滚动的时候，固定定位元素永远相对于窗户的位置定位。

设置参照物

理解了上面三种定位方法，我们再来考虑开始提到的那个问题，如果我们希望将一个数字列表压在一张图片之上。居中显示在网页之上，我们将数字列表设置定位之后，坐标应该设置成多少呢？因为居中的图片与浏览器窗口的左边距是不固定的，所以没有办法设置成一个固定值，这个时候，我们就需要给定位元素设置参照物。

将父级元素设置定位元素，那么子级元素定位的坐标原点会设置为父级元素左上角的位置。代码如下所示。

1

2

3

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}

父级容器不管是绝对定位，相对定位还是固定定位，都可以实现作为参照物的效果，在实际项目开发中，常用方法如下所示：

如果父级元素不脱离文档流，参与正常排版，那么父级设置相对定位。

如果父级需要根据视窗的显示位置而变化位置，可以设置固定定位。

一般父级容器不设置绝对定位。

注意事项

大家掌握了定位之后会发现一个问题，那就是只要我么使用定位，就可以实现所有的网页效果，再也不需要浮动布局，也不用管网页的树状结构了。

这样做其实是不可以的，在制作网页的过程中，我们不仅要将元素放在指定的位置，还要考虑网页的后续可维护性，已经针对不同屏幕尺寸的适应能力。因此，定位是我们实现网页布局的最后手段。多于一个新手来说，能不用定位来实现的布局，都不要用定位来实现。

三、课后练习

完成融职教育右侧返回顶部的悬浮效果。

制作一个在图片上显示图标描述文字的效果，并且图片再网页右下角显示。

制作一个标题效果，让标题左右两边各带一个横线（使用伪元素和定位来实现）。

【融职教育】在工作中学习，在学习中工作