定位 = 定位模式 + 边偏移;决定元素的最终位置。
定位模式:
- static:是默认值,在文档流中就是这个值。
- relative:相对自身原来的位置定位,不脱标,原来位置仍保留
- fixed:相对浏览器窗口来定位,脱离了文档流
- absolute:相对第一个已经定位(position属性值不是static)的祖先元素定位,脱离文档流
- 如果没有祖先元素定位,就会相对浏览器窗口定位
- 如果有祖先元素使用了定位,就会相对第一个(从内到外)使用了定位的祖先元素定位
边偏移:top,left,right,bottom
“子绝父相”的布局:
子级是绝对定位的话,父级要用相对定位
① 子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子。
② 父盒子需要加定位限制子盒子在父盒子内显示。
③ 父盒子布局时,需要占有位置,因此父亲只能是相对定位。
总结: 因为父级需要占有位置,因此是相对定位, 子盒子不需要占有位置,则是绝对定位 。但有些情况下也会遇到子绝父绝等情况。
定位的叠放次序:
z-index: 1;
无单位,只有定位的盒子才有 z-index 属性;默认值auto,数值越大盒子越上。
定位拓展:
1. 行内元素添加绝对或者固定定位,可以直接设置高度和宽度。
2. 块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小。
3.浮动元素、绝对定位(固定定位)脱标元素都不会触发外边距合并的问题。
4.绝对定位(固定定位) 会压住下面标准流所有的内容,浮动不会(最初用于文字环绕)
定位压住文字:
浮动用于文字环绕: