定位

定位

标准流(Normal Flow)

坐标系:从左往右,从上到下

1.默认情况下都是按照标准流排布

原理:因为很难实现兄弟元素中间的层叠效果

1.static: 默认属性

2.relative: 相对定位,相对于原来的位置.但是原来的位置还是不会改变(类似于opacity:0).不会影响其他元素,没有脱离标准流

left的百分比是相对于包含块
margin左右的百分比也是相对于包含块
transform:translate的百分比是相对于自己元素的

3.absolute: 绝对定位,冒泡寻找根元素,如果不是static则从当前元素的0,0开始.如果都是static则从最外层0,0开始

4.fixed: 固定定位,直接相对于浏览器定位

浏览器的展示大小叫视口
浏览器的可展示大小叫画布

脱标

脱标元素:fixed,float,absolute

1.可以随便设置宽高

2.宽高默认由内容决定

3.不再受标准流的约束

4.不再给父元素宽高数据

5.其实脱标是把元素转为block,而不是inline-block.但是因为是脱标不好规定父级元素,所以改为包裹内容.

一键三连!