CSS 定位详解 _CSS

css 有两个最重要的基本属性，前端开发必须掌握：display和position 。
display属性指定网页的布局。两个重要的布局，我已经介绍过了：弹性布局flex[1]和网格布局grid[2] 。
本文介绍非常有用的position属性。我希望通过10分钟的阅读，帮助大家轻松掌握网页定位，说清楚浏览器如何计算网页元素的位置，尤其是新引进的sticky定位。

文章插图

本文由国内最大的在线教育平台之一“腾讯课堂”[3]赞助。他们现在启动了“腾讯课堂101计划”[4]，推广平台上的课程资源，有不少优质内容。希望提高前端技术水平的同学，可以留意一下本文结尾的免费课程信息。

一、position 属性的作用position属性用来指定一个元素在网页上的位置，一共有5种定位方式，即position属性主要有五个值。

•static•relative•fixed•absolute•sticky

下面就依次介绍这五个值。最后一个sticky是2017年浏览器才支持的，本文将重点介绍。

二、static 属性值static是position属性的默认值。如果省略position属性，浏览器就认为该元素是static定位。
这时，浏览器会按照源码的顺序，决定每个元素的位置，这称为“正常的页面流”（normal flow）。每个块级元素占据自己的区块（block），元素与元素之间不产生重叠，这个位置就是元素的默认位置。

文章插图
注意，static定位所导致的元素位置，是浏览器自主决定的，所以这时top、bottom、left、right这四个属性无效。

三、relative，absolute，fixedrelative、absolute、fixed这三个属性值有一个共同点，都是相对于某个基点的定位，不同之处仅仅在于基点不同。所以，只要理解了它们的基点是什么，就很容易掌握这三个属性值。
这三种定位都不会对其他元素的位置产生影响，因此元素之间可能产生重叠。

3.1 relative 属性值relative表示，相对于默认位置（即static时的位置）进行偏移，即定位基点是元素的默认位置。

文章插图

文章插图
它必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离。

文章插图
div { position: relative; top: 20px;}上面代码中，div元素从默认位置向下偏移20px（即距离顶部20px）。

3.2 absolute 属性值absolute表示，相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。
它有一个重要的限制条件：父元素不能是static定位，否则定位基点就会变成整个网页的根元素html 。另外，absolute定位也必须搭配top、bottom、left、right这四个属性一起使用。

文章插图
/* HTML 代码如下 <div id="father"> <div id="son"></div> </div>*/#father { positon: relative;}#son { position: absolute; top: 20px;}上面代码中，父元素是relative定位，子元素是absolute定位，所以子元素的定位基点是父元素，相对于父元素的顶部向下偏移20px 。如果父元素是static定位，上例的子元素就是距离网页的顶部向下偏移20px 。
注意，absolute定位的元素会被“正常页面流”忽略，即在“正常页面流”中，该元素所占空间为零，周边元素不受影响。

3.3 fixed 属性值fixed表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。