前端联系7 (定位之谜)

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


属性名                      描述            值

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

猜你喜欢

转载自www.cnblogs.com/cl94/p/10304467.html
今日推荐