07-定位

1. CSS布局的三种机制

1. 普通流（标准流）
2. 浮动：让多个盒子(div)水平排列成一行
3. 定位：将盒子定在某一个位置 自由的漂浮在其他盒子的上面

2. 定位详解

定位 = 定位模式 + 边偏移

2.1 边偏移

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

2.2 定位模式 (position)

选择器 {
	 position: 属性值; 
}

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

2.2.1 静态定位(static)

静态定位是元素的默认定位方式，无定位、无边偏移的意思。

2.2.2 相对定位(relative)★

相对定位是元素相对于它原来在标准流中的位置来说的。
原来在标准流中的位置继续占有。

2.2.3 绝对定位(absolute)★

• 绝对定位是元素以带有定位的父辈级元素来移动位置
• 父辈级无定位将以浏览器为准
• 完全脱标，完全不占位置
• 口诀：子绝父相

2.2.4 固定定位(fixed)★

• 完全脱标 —— 完全不占位置；
• 只认浏览器的可视窗口

3. 定位（position）的扩展

3.1 绝对定位的盒子居中

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

3.2 堆叠顺序（z-index）

加了定位的盒子，默认后来者居上， 后面的盒子会压住前面的盒子。
应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。

3.3 定位改变display属性

浮动、固定定位和绝对定位会改变display属性为inline-block

4. 定位小结

定位模式	是否脱标占有位置	移动位置基准	模式转换（行内块）	使用情况
静态static	不脱标，正常模式	正常模式	不能	几乎不用
相对定位relative	不脱标，占有位置	相对自身位置移动	不能	基本单独使用
绝对定位absolute	完全脱标，不占有位置	相对于定位父级移动位置	能	要和定位父级元素搭配使用
固定定位fixed	完全脱标，不占有位置	相对于浏览器移动位置	能	单独使用，不需要父级

@拓展

圆角矩形设置4个角

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius