（学习笔记）css---定位

1、为什么需要定位

标准流（主要用于定位页面纵向盒子）和浮动（主要用于盒子内的横向布局）都无法实现的效果，图片或者其他元素层叠在其他元素之上的效果，就需要定位来做。如图所示：

2、定位组成

定位=定位模式+边偏移。

1）静态定位

就是没有定位的意思。

2）相对定位

特点（重要）：

第一，根据自己原来的位置来移动的。

红框就是它原来的位置。

第二，如果用相对定位移动以后，它原来的位置依旧保留，其他元素不会占有它原来的位置。

第二块不会占有它的位置。

3）绝对定位

特点（重要）：

第一，如果没有祖先元素盒子或者祖先盒子没有定位，那么就会根据整个网页文档来定位。

第二，如果祖先元素盒子有定位（相对、绝对、固定），那么就会根据最近一级已经定位了的祖先元素的盒子来作为参考点来进行自己的定位。

第三，绝对定位以后，就不再占有原来的位置（相对定位是依旧占有原来的位置），脱标了。

 

子绝父相（典型用法以及原理）

浮动的效果：

两个蓝色的盒子是浮动的，但不会叠加在粉色的盒子上，因为浮动是不会影响前面的盒子，只会影响后面的布局。

如果有三个盒子，要求不是放在同一水平线上，而且叠加在粉色盒子上，那么粉色盒子可以作为背景图，但是三个盒子如果用浮动，那么只会在同一水平线上显示。

子绝：子级元素可以放在父级盒子任何位置，而不占用位子，不会影响其他的兄弟盒子。

父相：根据绝对定位的第一条特性可以知道，一定要给父级盒子定位，否则子元素盒子就会根据网页文档来定位。

 

那么给父级盒子的定位是什么呢？

如果父级盒子加的是绝对定位，绝对定位是不占位置的，那么跟父级盒子同层次的盒子就会跑到它原来的位置，导致了页面布局混乱。相对定位是占有位置的，所以父级盒子用相对定位。

4）固定定位

特点（重要）：

第一，以浏览器的可视窗口为参考来移动。

第二，不会理会父级元素，跟父元素没有任何关系。

第三，不会随着滚动条而滚动。

第四，不再占有原先的位置，这一点跟绝对定位一样。

小技巧：贴着版心边缘走。

5）粘性定位

例子：

 

效果：既固定在视口，但又不完全是像固定定位一样完全固定在同一个位置。一开始的时候，看到一部分，到全部都能在视口里看到，到顶以后，不会随着滚动条而消失不见，依旧可以在视口里看到全部内容。

 

但是兼容性比较差，IE是不兼容的，所以一般都不会使用这种方式。是用js来做的。

 总结：

 

3、定位的叠放顺序

 

4、定位拓展

1）绝对定位的盒子如何让它在页面中水平或者垂直居中。

一般情况下，如果没有定位的盒子，margin：auto；就可以自动水平居中了，但是加了绝对定位的盒子不起作用。

这样做才可以：

2）定位的特殊性

第一，如果是行内元素（如span，本身没有宽高），它加了绝对定位或者固定定位，就可以直接给宽高，类似于给了浮动，也是一样可以直接给宽高。

第二，块级元素，如果给了绝对定位或者固定定位，不给宽高，就会默认宽高为内容大小。

第三，脱标的元素，譬如浮动、绝对定位、固定定位，不会触发外边距塌陷。

第四，绝对定位，固定定位，会被完全压住，但是浮动会被压住盒子，但不会压住盒子里的内容，譬如文字图片。

浮动：

绝对定位：