定位流

相对定位(position:relative)
1.什么是相对定位?相对定位就是相对于本身之前在标准流中的位置来移动。
2.注意点:
2.1)相对定位是不脱离标准流的,会继续在标准流中占用一份空间。相对定位须要配合top、bottom、left、right来使用。
2.2)在相对定位中同一个方向上的定位属性只能使用一个。
2.3)因为相对定位是不脱离标准流的,因此在相对定位中是区分块级元素/行内元素/行内块级元素。
2.4)因为相对定位是不脱离标准流的,而且相对定位的元素会占用标准流中的位置,因此当给相对定位的元素设置margin/padding等属性的时候会影响到标准流的布局(解释:给相对定位设置margin、padding属性的做用效果是在原来的位置上 )
3.运用场景:用于对元素进行微调(好比两个元素要顶部对齐时使用)、配合绝对定位来使用。
绝对定位(position:absolute)
1.什么是绝对定位?相对定位就是相对于body来定位。
2.注意点:
2.1)绝对定位的元素是脱离标准流的,也就是说绝对定位是不占空间的。
2.2)绝对定位中是不区分块级元素/行内元素/行内块级元素,也就是说行内元素也能够设置宽高了。
2.3)一个绝对定位的元素是以body做为参考点,那么实际上是以网页首屏的宽度和高度做为参考点,而不是以整个网页的宽度和高度做为参考点。
2.4)一个绝对定位的元素会忽略祖先元素的padding。
2.5)子绝父相
2.6)如何让绝对定位的元素水平居中(绝对定位的元素对margin:0 auto不起效果):只须要设置绝对定位元素的left:50%;而后再设置绝对定位元素的margin-left:-元素宽度/2 px;
3.绝对定位的参考点
规律:1)默认状况下全部的绝对定位的元素,不管有没有祖先元素,都会以body做为参考点。
2)若是一个绝对定位的元素有祖先元素,而且祖先元素也是定位流,那么这个绝对定位的元素就会以定位流的那个祖先元素做为参考点(注意点:只要是这个绝对定位元素的祖先元素均可以、这里的定位流指的是绝对定位/相对定位/固定定位、只有静态定位不行)。
3)若是一个绝对定位的元素有祖先元素,而且祖先元素也是定位流,并且祖先元素中有多个元素都是定位流,会以就近原则来选择最终以哪一个祖先元素做为参考点。
固定定位(position:fixed)
1.什么是固定定位?固定定位和前面学习的背景关联方式很像,背景定位可让背景图片不随着滚动条的滚动而滚动,而固定定位可让某个盒子不随着滚动条的滚动而滚动。
2.注意点:
2.1)固定定位的元素是脱离标准流的,也就是说固定定位是不占空间的。
2.2)固定定位和绝对定位同样,是不区分块级元素/行内元素/行内块级元素,也就是说行内元素也能够设置宽高了。布局