定位技术

Posted 2020-10-02

 定位的定义：
 在CSS中关于定位的内容是：position:relative | absolute | static | fixed

 position:static(静态) 不能通过z-index进行层次分级，没什么可写的。他是默认值。

position:relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。     

position:absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。 

　　　　：1、使用之后不占据原来的位置，脱标了，就像使用浮动一样，飘起来了，其他的div会到他的底下。

　　　　：2、如果给他宽高，再给他上下左右距离，他就可以随意变动，这个不错的。

　　　　：3、如果父盒子和子盒子都使用绝对定位的话，那么子盒子也可以随意指定位置，只不过位置是从父盒子出发的，不是从浏览器出发的。

position:fixed（固定定位） 这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。