为什么要用定位
1.当我们需要让一个盒子压住另一个盒子时,如:
2.当我们需要一个盒子固定在屏幕的一个地方,如:
定位组成
定位:定位︰将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子。
定位=定位模式+边偏移。
定位模式:用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
定位模位
1、静态定位static
静态定位是元素的默认定位方式,无定位的意思。语法:
选择器{
position : static; }
静态定位按照标准流特性摆放位置,它没有边偏移静态定位在布局时很少用到
2、相对定位relative
相对定位是元素在移动位置的时候,是相对于它原来的位置来说的。语法︰
选择器{
position: relative; }
1.它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)。
2,原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它。(不脱标,继续保留原来位置)因此,相对定位并没有脱标。
3、绝对定位absolute
绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的。语法∶
选择器{
position: absolute; }
1.如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位( Document文档)。
2.如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置。
3.绝对定位不再占有原先的位置。(脱标)
4、固定定位fixed
固定定位是元素固定于浏览器可视区的位置。主要使用场景︰可以在浏览器页面滚动时元素的位置不会改变。语法:
选择器{
position : fixed; }
固定定位的特点∶(务必记住)
1、以浏览器的可视窗口为参照点移动元素。跟父元素没有任何关系不随滚动条滚动。
2.固定定位不在占有原先的位置。
固定定位也是脱标的,其实固定定位也可以看做是一种特殊的绝对定位。