前端联系7 （定位之谜）

标签：相对   空间   log   top   abs   www   tom   前端   容器   

说明：定位就是把页面直接定位到页面的某个地方，而不是浮动

属性名                      描述　　　　　　　　　　　　值

position                  定位　　　　　　　　　　　　fixed（固定定位），relative（相对定位），absolute（绝对定位）

left　　　　　　　离左边多少距离　　　　　　　px，%

top　　　　　　　离上边多少距离

right　　　　　　离右边多少距离

bottom　　　　  离下边多少距离

Fixed：固定定位

　　说明：固定定位是以浏览器的窗口来进行定位的方式，脱离原来的文档流，不再占用空间。

　　　　所以它的定位和它在哪个容器下无关，也不会影响其他的容器

　　案例：https://www.cnblogs.com/cl94/p/10303922.html

Relative：相对定位

　　说明：相对定位就是相对于原来的自己进行的定位方式。原来的位置没有脱离文档流，依然占用空间，如果有数值的话，新的位置脱离了原来的文档流，不再占用空间。

　　　　一般配合绝对定位来使用。

　　案例：https://www.cnblogs.com/cl94/p/10304043.html

Absolute：绝对定位

　　说明：绝对定位是查找它自己的父元素（不管是几层），有其他定位方式（固定或相对）的父元素来进行定位。如果没有找到，以body进行定位

　　　　注意：绝对定位不属于文档流，不占用空间

　　　　　　一般和绝对定位结合使用

　　案例：https://www.cnblogs.com/cl94/p/10304463.html

前端联系7 （定位之谜）

标签：相对   空间   log   top   abs   www   tom   前端   容器   

原文地址：https://www.cnblogs.com/cl94/p/10304467.html