1.3
静态定位
static
(了解)
静态定位是元素的
默认定位方式
,
无定位的意思
。
语法:
选择器
{ position: static; }
静态定位按照标准流特性摆放位置,它没有边偏移
静态定位在布局时很少用到
1.4
相对定位
relative
(重要)
相对定位
是元素在移动位置的时候,是相对于它
原来的位置
来说的(自恋型)。
语法:
选择器
{ position: relative; }
相对定位的特点:(务必记住)
1.它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)。
2.原来
在标准流的
位置
继续占有,后面的盒子仍然以标准流的方式对待它。
因此,相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。
1.5
绝对定位
absolute
(重要)
绝对定位
是元素在移动位置的时候,是相对于它
祖先元素
来说的(拼爹型)。
语法:
选择器{ position: absolute; }
绝对定位的特点:(务必记住)
1.
如果
没有祖先元素
或者
祖先元素没有定位
,则以浏览器为准定位(
Document
文档)。
2.
如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置。
3.
绝对定位
不再占有原先的位置
。(脱标)
所以绝对定位是脱离标准流的。
1.6
子绝父相的由来
弄清楚这个口诀,就明白了绝对定位和相对定位的使用场景。
这个“子绝父相”太重要了,是我们学习定位的口诀,是定位中最常用的一种方式这句话的意思是:
子级是绝
对定位的话,父级要用相对定位
。
①子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子。
②父盒子需要加定位限制子盒子在父盒子内显示。
③父盒子布局时,需要占有位置,因此父亲只能是相对定位。
这就是子绝父相的由来,所以
相对定位经常用来作为绝对定位的父级
。
总结:
因为父级需要占有位置,因此是相对定位,子盒子不需要占有位置,则是绝对定位
当然,子绝父相不是永远不变的,如果父元素不需要占有位置,
子绝父绝
也会遇到。
1.7
固定定位
fixed
(重要)
固定定位
是元素
固定于浏览器可视区的位置
。主要使用场景:可以在浏览器页面滚动时元素的位置不会改变。
语法:
选择器
{ position: fixed; }
固定定位的特点:(务必记住)
1.
以浏览器的可视窗口为参照点移动元素。
跟父元素没有任何关系
不随滚动条滚动。
2.
固定定位
不在占有原先的位置
。
固定定位也是脱标的,其实固定定位也可以看做是一种特殊的绝对定位。
1.8
粘性定位
sticky
(了解)
粘性定位
可以被认为是相对定位和固定定位的混合。
Sticky
粘性的
语法:
选择器
{ position: sticky; top: 10px; }
粘性定位的特点:
1.
以浏览器的可视窗口为参照点移动元素(固定定位特点)
2.
粘性定位
占有原先的位置
(相对定位特点)
3.
必须添加
top
、
left
、
right
、
bottom
其中一个才有效
跟页面滚动搭配使用。兼容性较差,
IE
不支持。