3. 定位流排版方式
1. 相对定位:
position:relative;
top: xx;
right: xx;
left: xx;
bottom: xx;
相对定位就是相对于自己以前在标准流中的位置进行定位.要结合上/右/下/左来设置位置.
注意:
- 相对定位不脱离标准流,会在标准流中占用空间,
- 在相对定位中同一个方向上的定位属性只能设置一个
- 在相对定位中区分行内元素,块级元素和行内块级元素
- 给相对定位的元素添加margin属性是添加给他定位之前在标准流中的位置,会影响标准流的布局
应用:
- 用来微调位置
- 配合绝对定位来使用
2. 绝对定位:
position: absolute;
top:xx;
right:xx;
left:xx;
bottom:xx;
绝对定位就是相对于祖先元素的定位来定位的,结合上/右/下/左来设置位置
注意:
- 绝对定位脱离标准流.
- 在绝对定位中不区分行内元素,块级元素和行内块级元素
- 一个绝对定位的元素会忽略祖先元素的padding
- 默认情况下所有的绝对定位的元素,无论有没有祖先元素,都会以body来定位,一个网页首屏的宽度和高度来确定位置,
- 如果它的祖先元素也是定位流(相对/绝对/固定),那么这个绝对定位的元素就会以定位流的那个祖先元素为参考点.如果祖先元素中有多个是定位流,那么哪个离得近哪个就作为参考点,静态定位不行
