本文共 1392 字，大约阅读时间需要 4 分钟。

一、定位(position)：

定位是一种更加高级的布局手段,通过定位我们可以将一个元素摆放到页面的任意位置 使用position属性来设置定位 可选值： static:默认值 元素是静止的 没有开启定位 relative:开启元素的相对定位

相对定位的特点：

1.元素开启相对定位以后 如果不设置偏移量(offset) 元素不会发生任何变化 通过偏移量设置元素的位置: top:定位元素和定位位置上边的距离 bottom:定位元素和定位位置下边的距离 left:定位元素和定位位置左边的距离 right:定位元素和定位位置右边的距离 2.相对定位是参照与元素在文档流中的位置进行定位的 3.相对定位会提升元素的层级 4.相对定位不会使元素脱离文档流 5.相对定位不会改变元素的性质 块还是块 行内还是行内

absolute:开启元素的绝对定位

绝对定位特点:

1.开启绝对定位后 如果不设置偏移量 元素位置不会发生变化 2.开启绝对定位后 元素会从文档流中脱离 3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开 4.绝对定位会使元素提升层级 5.绝对定位是相对于其包含块进行定位的 包含块(containing block): 正常情况下包含块就是离当前元素最近的祖先块元素 绝对定位的包含块： 离它最近的开启定位的祖先元素 如果所有的祖先元素都没有开启定位 则相对于根元素进行定位 html(根元素，初始包含块)

fixed:开启元素的固定定位

固定定位也是一种绝对定位 所以固定定位的大部分特点和绝对定位一样

唯一不同的是 固定定位永远参照于浏览器的视口(浏览器可视窗口)进行定位 固定定位的元素不会随滚动条滚动上去 而是跟随可视窗口的移动而移动

sticky:开启元素的粘滞定位

粘滞定位的特点和相对定位基本一样

粘滞定位可以在元素到达某个位置时固定

二、绝对定位的元素布局

开启定位后的等式： left+margin-left+border-left+padding-left+width+padding-left+width+padding-right+margin-right+right=包含块内容区的宽度

当开启绝对定位后：

水平方向的布局等式就要添加left和right两个值 此时规则和之前一样只是多添加了两个值 当发生过渡约束时： 如果九个值中没有auto 则自动调整right值 以使等式满足 如果有auto则自动调整auto的值以使等式满足 可以设置auto的值：margin width left right left和right的值默认是auto 则等式不满足时，会自动调整这两个值

垂直方向布局的等式也必须要满足：

top+margin-top+margin-bottom+padding—top/bottom+border-top/bottom+height+bottom=包含块的高度

以下设置可以让元素水平垂直都居中:

left: 0;

right: 0; top: 0; bottom: 0;

三、元素的层级

对于开启定位的元素，可以通过z-index属性来指定元素的层级 z-index需要一个整数作为参数，值越大的元素的层级越高 元素层级越高的越优先显示 如果元素层级一样 则优先显示靠下的 祖先元素层级再高，不会盖住后代元素

转载地址：http://tlqzi.baihongyu.com/