定位.md

定位

将盒子定在某一个位置 自由的漂浮在其他盒子(包括标准流和浮动)的上面

定位 = 定位模式 + 边偏移

边偏移

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

定位模式

选择器 { position: 属性值; }

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

静态定位(static)

静态定位是元素的默认定位方式

相对定位(relative)

• 相对定位是元素相对于它原来在标准流中的位置来说的
• 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它

绝对定位(absolute)

• 绝对定位是元素以带有定位的父级元素来移动位置
• 完全脱标 ---- 完全不占位置
• 父元素没有定位，则元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位

子绝父相 ---- 子级是绝对定位，父级要用相对定位。

固定定位(fixed)

• 完全脱标 ---- 完全不占位置

• 只认浏览器的可视窗口 ---- 浏览器可视窗口 + 边偏移属性 来设置元素的位置

  • 不随滚动条滚动

扩展

居中

绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。

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

堆叠顺序（z-index）

加了定位的盒子，默认后来者居上， 后面的盒子会压住前面的盒子

selector {
    z-index: value;
}

属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上

z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效

定位改变display属性

一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等

给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了

总结

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