css定位笔记

为什么需要定位？

因为以前的标准流和浮动无法快速实现，此时需要定位来实现
例如：
1.当某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子
2.当我们滚动窗口的时候，盒子是固定屏幕在某个位置的 (固定定位)

定位

一.定位组成
定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子。
定位=定位模式+边偏移.
定位模式用于指定一个元素在 文档中的定位方式。边偏移则决定了该元素的最终位置。

1.定位模式
定位模式决定元素的定位方式,它通过CSS的position属性来设置,其值可以分为四个:

2.边偏移
边偏移就是定位的盒子移动到最终位置。有top、bottom、 left 和right 4个属性。

二.定位详解

1.静态定位static(了解)
静态定位是元素的默认定位方式，无定位的意思
语法：
选择器{position:static；}
静态定位按照标准流特性摆放位置,它没有边偏移
静态定位在布局时很少用到

2.相对定位relative(重要)
相对定位是元素在移动位置的时候,是相对于它原来的位置来说的(自恋型)。
语法：
选择器{position:relative；}
相对定位的特点: ( 务必记住)
1.它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)。
2.原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它。( 不脱标，继续占有原来位置)

3.绝对定位absolute(重要)
绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的(拼爹型)。
语法:
选择器{ position: absolute; }
绝对定位的特点: ( 务必记住)
1.如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位( Document文档)。
2.如果祖先元素有定位(相对、绝对、固定定位) , 则以最近一级的有定位祖先元素为参考点移动位置。
3.绝对定位不再占有原先的位置。( 脱标，不在占有原来位置)

4.固定定位 fixed (重要)
固定定位是元素固定于浏览器可视区的位置。主要使用场景:可以在浏览器页面滚动时元素的位置不会改变。
语法:
选择器{ position: fixed; }
固定定位的特点: ( 务必记住)
以浏览器的可视窗口为参照点移动元素。
跟父元素没有任何关系
不随滚动条滚动。
固定定位不在占有原先的位置。
固定定位也是脱标的,其实固定定位也可以看做是一种特殊的绝对定位

5.粘性定位sticky(了解)
粘性定位可以被认为是相对定位和固定定位的混合。Sticky 粘性的
语法:
选择器{ position: sticky; top: 10px; }
粘性定位的特点:
以浏览器的可视窗口为参照点移动元素(固定定位特点)
粘性定位占有原先的位置(相对定位特点)
必须添加top、left、 right. bottom 其中-个才有效
跟页面滚动搭配使用。兼容性较差, IE不支持。

三.子绝父相的由来
弄清楚这个口诀,就明白了绝对定位和相对定位的使用场景。
这个“子绝父相”太重要了,是我们学习定位的口诀,是定位中最常用的一种方式这句话的意思是:子级是绝
对定位的话,父级要用相对定位。
①子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子。
②父盒子需要加定位限制子盒子在父盒子内显示。
③父盒子布局时,需要占有位置,因此父亲只能是相对定位。
这就是子绝父相的由来,所以相对定位经常用来作为绝对定位的父级。
总结:因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置,则是绝对定位
当然，子绝父相不是永远不变的,如果父元素不需要占有位置,子绝父绝也会遇到。

四.定位总结