用户投稿Position 定位
Position (定位) 是指元素在页面上的位置。在一般情况下，我们写好的元素会由左至右、由上至下依序在浏览器中排列，不过当网页变的愈加複杂，我们就必须使用不同的定位方法进行排版，这边文章就是要来介绍 position 属性可以做到哪些定位方法。
Static 预设
Static 是 HTML 预设的定位方式，即没有特别定位，元素会由左至右、由上而下依序显示，且不受 top、bottom、left、right 等定位属性的影响。
语法：
position: static; /* 预设，不定位 */position: relative; /* 相对定位 */position: absolute; /* 绝对定位 */position: fixed; /* 固定定位 */position: sticky; /* 黏性定位 */Relative 相对定位
Relative (相对定位) 是指针对元素原本应该在的为基準 (参考点)，配合 top、bottom、left、right 四个属性做位移，例如 top: 10px 为 相对于原本的位置，距离 top 10px，也就是说相对于原本应该在的位置下移 10px。
Relative 的特点：
参考点为该元素原本的位置位移只对该元素作用，原本的空间不会改变，不影响周围元素的位置left 和 right 不能同时设定、top 和 bottom 不能同时设定相对定位可以和浮动同时使用 (不推荐)範例：
Absolute 绝对定位
Absolute (绝对定位) 会以距离该元素最近的已定位 ( 拥有 position 属性的元素 ) 祖先元素为参考点，若无已定位祖先元素则往外找以根元素 <html> 为参考点进行位置偏移，而偏移方向和距离则一样以上下左右四个属性来控制。
Absolute 的特点：
参考点为最近的已定位祖先元素 ( 已定位元素是指 position 属性不是 static 的元素)绝对定位的元素会脱离元素原本的排列 ( 脱离布局流 Normal flow )绝对定位不能与浮动同时设定，会造成浮动失效不论什么类型的元素在经过绝对定位后皆可指定宽高範例：
绝对定位会以最近的已定位祖先元素为参考点，若无则以根元素为参考点
绝对定位脱离原本的布局流，不佔空间
行内元素在经过绝对定位后可指定宽高
Fixed 固定定位
固定定位是以浏览器视窗 (view) 为参考进行位移，无论网页是否滚动、滚动到哪都不会影响固定定位元素的位置，常见应用例如视窗右下角弹出广告、回到最上按钮、联络客服按钮等。
Fixed 的特点：
参考点为浏览器可视範围，不受页面滚动影响元素的位置脱离元素原本的排列 ( 脱离布局流 Normal flow )不能与浮动同时设定，会造成浮动失效不论什么类型的元素在经过固定定位后皆可指定宽高範例：
不管页面滚度到何处，position fixed 的红色正方形都在同样的位置
Sticky 黏性定位
sticky 黏性定位是一种比较新的定位方法，在一般状况下，sticky 与 relative 的表现相同，会依照布局流排列，而当元素滚动到指定位置时元素会被固定 (fixed) 住，直到父元素脱离视窗可视範围又变为 relative 定位。
黏性定位的参考点为「 最近一个具有滚动轴的祖先元素 」，也就是说当元素设定为 position: sticky; 和 top: 10px 代表 “当元素在最近一个具有滚动轴的祖先元素上边缘 10px 时固定，直到该元素的父元素脱离视窗範围”。
範例：
假设今天我们有几组标题+详细内容的页面，当画面滚动时无法看到该内容的标题 (如下图看不到 1-5 是属于哪一类)
这时候就可以使用 sticky 将标题固定在我们的可视範围直到第一部分内容滚动完毕。
.father { background-color: lightblue; padding: 20px; height: 2000px;}.box { background-color: rgb(225, 225, 225);}.title { background-color: lightcoral; position: sticky; top: 0; /* 当 title 滚动至 top 0 时固定住，直到父元素 (box) 脱离视窗範围 */}<div class="father"> <div class="box"> <div class="title">第一项</div> <h3>1-1</h3> <h3>1-2</h3> <h3>1-3</h3> <h3>1-4</h3> <h3>1-5</h3> <h3>1-6</h3> <h3>1-7</h3> </div> <div class="box"> <div class="title">第二项</div> <h3>2-1</h3> <h3>2-2</h3> <h3>2-3</h3> <h3>2-4</h3> <h3>2-5</h3> <h3>2-6</h3> <h3>2-7</h3> </div></div>上一篇：[快速入门前端 28] Float 浮动
下一篇：[快速入门前端 30] z-index 和定位的特殊用法
系列文章列表：[快速入门前端] 系列文章索引列表
微信扫一扫打赏
支付宝扫一扫打赏
