前端学习--定位 二

固定定位  fixed

固定定位是元素固定于浏览器可视区域的位置。主要用于浏览器页面滚动时需保持位置不变的情况。

特点：1. 以浏览器可视窗口为参考移动元素

跟父元素没有任何关系

不随滚动条滚动

2.固定定位不在占有原来的位置。

固定定位也是脱标的，固定定位可看做是一种特殊的绝对定位。

粘性定位--sticky

粘性定位可以视为是相对定位与固定定位的混合。

特点：

1.同样以浏览器的可视窗口为参照点移动元素（固定定位特点）

2.粘性定位占有原先的位置（先对定位特点）

3.必须添加top、left、right、bottom其中一个才有效。

 

定位小结

定位模式	是否脱标	移动位置	是否常用
static静态定位	否	不能使用边便宜	很少
relative相对定位	否	相对于自己元原来位置移动	常用
absolute绝对定位	是	相对于 先祖有定位元素位置移动	常用
fixed固定定位	是	浏览器可视区域	常用
sticky粘性定位	否	浏览器可视区域	当前较少

 

定位叠放次序 z-index

定位布局出现盒子重叠时，使用z-index 来设置叠放次序

特点：

数值可为正、负数或0，默认auto，数值越大位置越靠上，为默认时，后来居上

数字后不能加单位

只有定位的盒子才有z-index 属性。

 

绝对定位 /固定定位 的盒子居中

不能通过margine：0 auto来水平居中

1.left/right：50%；左边移动到元素的水平中心位置

2.maigine-left/right：-xxpx；让盒子向左/右移动自生宽度的一半。