CSS学习笔记9——定位position

CSS定位

可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子

定位组成

定位 = 定位模式 + 边偏移

定位模式用于指定一个元素在文档中的定位方式

边偏移决定了该元素的最终位置

定位模式

通过position属性来设置

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

边偏移

• 属性：top、bottom、left、right

属性	示例	描述
top	top:80px	顶端偏移量，相对于其父元素上边线的距离
bottom	bottom:80px	底部偏移量，相对于其父元素下边线的距离
left	left:80px	左侧偏移量，相对于其父元素左边线的距离
right	right:80px	右侧偏移量，相对于其父元素右边线距离

静态定位static

选择器 {position:static;}

• 按照标准流摆放，没有边偏移

相对定位relative（重要）

• 以自己原来的位置为准

选择器 {position:relative;}

• 移动了也不脱标，继续保留原来位置

绝对定位absolute（重要）

选择器 {position:absolute;}

• 没有祖先元素或祖先元素没有定位，则以浏览器为准对齐
• 若祖先元素有定位（相对、绝对、固定定位），则以最近一级有定位的祖先元素为参考点
• 不占有原来位置（脱标）

子绝父相

子级绝对定位，父级相对定位

• 父级需要占有位置，子级不需要占位置

固定定位fixed（重要）

固定于浏览器可视区位置

选择器 {position:fixed;}

• 以浏览器可视窗口为参照
• 不占有原先位置（脱标）

eg.固定在版心右侧

1. 让盒子left:50%，走到可视区一半位置
2. 让固定定位盒子margin-left:版心宽度的一半 多走版心宽度一半距离，到版心右侧

粘性定位sticky

选择器 {position:sticky; top:10px;}

• 以浏览器可视窗口为参照点移动元素
• 占有原先位置（相对定位特点）
• 必须添加top、left、bottom、right其中一个才有效

兼容性较差，IE不支持

定位叠放次序z-index

出现盒子重合情况，可用z-index来控制盒子前后次序（z轴）

选择器 {z-index:1;}

• 数值默认auto，数值越大盒子越靠上
• 数字后面不能加单位
• 只有定位的盒子才有z-index属性

---

拓展

绝对定位盒子居中

• 加了绝对定位的盒子不能用margin:0 auto水平居中

1. left:50%; 让盒子左侧移到父级元素水平中心位置
2. margin-left:-???px; 让盒子向左移动自身宽度的一半

特殊特性

1. 行内元素加绝对/固定定位，可直接设置宽高
2. 块级元素加绝对/固定定位，若不给宽高，默认是内容的大小
3. 脱标的盒子不会出发外边距塌陷
4. 绝对定位/固定定位会完全压住盒子

• 浮动元素会压住下面标准流盒子但不会压住盒子里的文字/图片

浮动：文字环绕

• 绝对/固定定位会压住下面标准流的所有内容