3.26 定位流(一)

3. 定位流排版方式

1. 相对定位:

position:relative;
top: xx;
right: xx;
left: xx;
bottom: xx;

相对定位就是相对于自己以前在标准流中的位置进行定位.要结合上/右/下/左来设置位置.

注意:

1. 相对定位不脱离标准流,会在标准流中占用空间,
2. 在相对定位中同一个方向上的定位属性只能设置一个
3. 在相对定位中区分行内元素,块级元素和行内块级元素
4. 给相对定位的元素添加margin属性是添加给他定位之前在标准流中的位置,会影响标准流的布局

应用:

1. 用来微调位置
2. 配合绝对定位来使用

2. 绝对定位:

position: absolute;
top:xx;
right:xx;
left:xx;
bottom:xx;

绝对定位就是相对于祖先元素的定位来定位的,结合上/右/下/左来设置位置

注意:

1. 绝对定位脱离标准流.
2. 在绝对定位中不区分行内元素,块级元素和行内块级元素
3. 一个绝对定位的元素会忽略祖先元素的padding
4. 默认情况下所有的绝对定位的元素,无论有没有祖先元素,都会以body来定位,一个网页首屏的宽度和高度来确定位置,
5. 如果它的祖先元素也是定位流(相对/绝对/固定),那么这个绝对定位的元素就会以定位流的那个祖先元素为参考点.如果祖先元素中有多个是定位流,那么哪个离得近哪个就作为参考点,静态定位不行

子绝父相:子元素用绝对定位,父元素用相对定位

水平居中:设置绝对定位元素的left:50%;.然后再设置margin-left:-宽度的一半,以设置绝对定位元素的水平居中