介绍position的几种属性
position属性有以下几种:
- 相对定位(relative)
- 绝对定位(absolute)
- 静态定位(static)
- 固定定位(fixed)
1. 相对定位(relative)
相对定位是相对于原来自己以前在标准流中的位置来移动。relative表现和static一样,除非添加在一个相对定位
position:relative
元素设置top\right\bottom\left
属性才会偏离正常位置。相对定位不脱离文档流,会继续在标准流中占有一份空间。
由于相对定位不脱离文档流,所以在相对定位中是区分块级元素和行内元素的。
相对定位同一方向的定位熟悉只能有一个(垂直和水平方向).
使用
margin/padding
等属性会影响到标准流的布局。相对定位的应用场景:用于对元素进行微调;配合绝对定位来使用。
2. 绝对定位(absolute)
绝对定位和固定定位相似,但是它不是相对于视窗,而是相对于最近的
position
祖先元素。如果一个绝对定位的元素有定位流的祖先元素,并且祖先元素也是定位流(相对定位,绝对定位,固定定位),那么这个绝对定位的元素就会以定位流的那个祖先元素为参考点。
如果一个绝对定位的元素有祖先元素,并且祖先元素中有多个元素都是定位流,那么这个绝对定位的元素就会以离他最近的那个定位流的祖先元素为参考点。
如果绝对定位元素没有定位流祖先元素,那么它是相对于文档的body元素定位,并且会随着页面的滚动而移动。
注意的是一个
position
元素指的是(绝对定位、相对定位、静态定位),不包括固定定位。绝对定位的元素是脱离标准流的。
在企业开发中一般不单独使用相对定位和绝对定位,而是结合一起使用。一般“子绝父相”,即子元素用绝对定位,父元素用相对定位。但凡说到定位或一个盒子覆盖在另一个盒子上都要想到“子绝父相”。
3. 静态定位(static)
static是默认值,表示不会被特殊定位。
4. 固定定位(fixed)
固定定位
position:fixed
相对于视窗来定位,也就是说元素不会随着页面滚动而发生变化,元素还是停留在原来位置。可以使用
top\right\bottom\left
属性固定定位的元素是脱离标准流的,不会占用标准流的空间。