【CSS】定位

定位

定位：将盒子定在某一位置

定位 = 定位模式 + 边偏移

定位模式用于指定一个元素在文档中的定位方式，边偏移则决定该元素的最终位置

定位模式

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

边偏移

边偏移属性	示例
top	top:80px;顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom:80px;
left	left:80px;
right	right:80px;

定位

静态定位static（了解）

静态定位是元素的默认定位方式，无定位的意思

语法：选择器:{position:static;}

相对定位relative（重要）

语法：选择器:{position:relative;}

1. 相对定位是相对于原来位置移动
2. 原来在标准流的位置继续占用，后面盒子不脱标

绝对定位absolute（重要）

语法：选择器:{position:absolute;}

绝对定位是元素在移动位置时，相对于它祖先元素来说的

1. 如果没有祖先元素或祖先元素没有定位，则以浏览器为准
2. 如果祖先元素有定位（相对、绝对、固定），则以最近一级的有定位的祖先元素为参考节点移动
3. 绝对定位不再占有原先的位置，比浮动还高

子绝父相：父亲用相对定位，儿子用相对定位

固定定位fixed（重要）

固定定位时元素固定于浏览器可视区域的位置，可在浏览器滚动时不改变位置

语法：选择器:{position:fixed;}

1. 以浏览器可视窗口为参照点移动
2. 与父元素没有任何关系
3. 固定定位不占用原来位置

tips：固定到版心右侧位置

1. 让固定的盒子left:50%;到中间
2. 让固定定位的盒子margin-left版心宽度一般的距离

粘贴定位sticky(了解)

语法：选择器:{position:sticky;}

可以认为相对定位和绝对定位的混合

1. 以浏览器的可视化窗口为参照点移动元素
2. 粘贴定位占有原来位置
3. 必须添加top、left、right、bottom其中的一种才有效
4. 兼容性不好

定位叠放次序z-index

在使用定位布局时，肯会出现盒子重叠的情况，此时可用z-index来控制盒子的前后次序（z轴）

• 语法：选择器:{z-index:1;}
• 数值可以是正、负、0，默认auto，数值越大盒子越靠上
• 如果属性相同，则按书写顺序后来居上
• 数字后面没有单位
• 只有定位的盒子才有z-index属性

定位拓展

1. 绝对定位的盒子居中

   加了绝对定位的盒子不能通过margin:0 auto;来水平居中，但是可以通过以下计算来实现水平和垂直居中

   1. left:50%;
   2. margin-left:-100px;(盒子宽度的一半)

2. 定位的特殊特性

   绝对定位和相对定位和浮动类似

   1. 行内元素添加固定定位或绝对定位可以直接设置高宽
   2. 块级元素添加绝对或固定定位如果不给高宽，则默认大小是内容大小

3. 脱标盒子不会塌陷

4. 绝对或固定定位会完全压住盒子

   浮动元素只会压住下面标准流的盒子，但不会压住下面盒子里的内容

   绝对或固定定位会压住下面盒子里的所有内容