定位

 

定位 = 定位模式 + 边位移

定位模式

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

边位移

属性	示例	语义
top	top: 80px	距离父盒子上边线的距离
bottom	bottom: 80px	距离父盒子下边线的距离
left	left: 80px	距离父盒子左边线的距离
right	right: 80px	距离父盒子右边线的距离

定位模式详解

静态定位static（默认）

系统默认方式，即为标准流，没有边偏移

选择器 : {position: static;}

相对定位relative（重要）

以原来自己的坐标为标准，加上边偏移移动，边偏移是距离自己原来的盒子的距离（left盒子向右走）

显示位置移动了，但实际占用盒子空间还是原来的标准流位置

选择器 : {position: relative;}

绝对定位absolute（重要）

• 长辈盒子： 从父盒子开始，到爷盒子……祖先盒子一直到浏览器盒子

以有定位的长辈盒子的坐标为标准，加上边偏移移动，边偏移是距离有定位的长辈盒子的距离（left盒子向右走）

如果长辈盒子都没有定位，则以浏览器盒子为标准，默认在左上角

绝对定位不在占有原来的标准流位置（脱标，比浮动还要上层）

 

选择器 : {position: absolute;}

子绝父相（常用定位模式）

父盒子采用相对定位占据位置，子盒子采取绝对定位在父盒子中间游走

 

固定定位fixed（重要）

元素会固定到浏览器可视窗口（和浏览器大小有关）的某个位置，上下滑动浏览器不会改变它的位置

与父元素没有任何关系，位置只会相对于浏览器可视窗口

固定定位不占有原有位置（脱标），和绝对定位类似

选择器 : {position: fixed;}

粘性定位sticky（了解）

粘性定位sticky盒子占有原来的位置，标准流（类似相对定位）

当到达设定位置时，粘性定位sticky盒子会在浏览器窗口固定显示（类似固定定位）

必须要设置到达什么位置粘性定位sticky盒子会在浏览器窗口固定显示（偏移量），否则固定效果不生效

选择器 : {
    position:sticky;
    top: 0;
}

定位模式总结（子绝父相）

定位模式	是否脱标	移动位置	是否常用
static	否	不能使用边偏移	很少
relative	否（占有位置）	相对自身移动位置	常用
absolute	是（不占有位置）	相对 设置定位的长辈盒子 位置	常用
fixed	是（不占有位置）	相对 浏览器可视界面 位置	常用
sticky	否（占有位置）	相对 浏览器可视界面 位置	很少

定位堆放次序

使用z-index来指定盒子的Z轴优先级，Z轴即离用户的远近

z-index: priority-num

• priority-num可以是一切整数（正负整数 + 0），整数越大优先级越高，盒子越靠上；

• 如果优先级一样，则安装代码书写顺序，后来者优先级高；

• 只有定位的盒子才有z-index属性，标准流和浮动没有

定位小技巧

固定定位与版心对齐

固定定位不占空间

选择器 : {
    position: fixed;
    left: 50%; // 左侧距离浏览器宽度的一半
    margin-left: 版心盒子宽度的一半 // 再往右走版心盒子的一半，其实就是向左撑大了盒子，但这个盒子距离浏览器50%没变
}

绝对定位居中显示（相对长辈带定位的盒子）

常用的margin: 0 auto针对标准流可以，但是绝对定位不占空间，所以不行。

.box {
    /* 水平居中 */
    left: 50%; // 左侧距离浏览器宽度的一半
    margin-left: -1/2 * 当前盒子width  // 权值是负数，所以盒子向左走
    /* 垂直居中 */
    top: 50%; // 左侧距离浏览器高度的一半
    margin-top: -1/2 * 当前盒子height  // 权值是负数，所以盒子向上走
}
​
​

定位其他特点

和浮动的相同点

• 与浮动类似，给行内元素添加绝对或者固定定位（脱标），可以直接设置height和width，不给则默认是里面的内容大小；

• 与浮动类似，给块级元素添加绝对或者固定定位（脱标），如果不设置height和width，默认是里面的内容大小，原来宽度为整行；

• 与浮动类似，给盒子添加绝对或者固定定位（脱标），脱标盒子不会触发外边界合并的问题

和浮动的不同点

• 浮动的盒子会压住标准流的盒子，但是不会压住标准流里面的文字（因为浮动最开始是让文字来环绕图片的）

• 给盒子添加绝对或者固定定位（脱标），脱标会压住标准流里面的文字

•