通过js动态设置position属性,设置元素定位方式其通过设置top,left,bottom,right属性设置其元素显示位置

　　基本概念原点:元素进行定位时的基准点或者参考点(浏览器或者父容器的左上角即原点)

　　top,left,bottom,right即将要进行定位的元素距离原点的偏移量

　　position3种定位方式1) relative 相对定位(只以父子容器为例)

　　1.1 如果没有父容器则以浏览器可视窗口的左上角为原点(0,0),进行相对定位

以浏览器进行相对定位

　　1.2 有父容器,不管父容器是否进行了定位,都以父容器进行相对定位

以父容器进行定位

　　2 absolute 绝对定位(只以父子容器为例)

　　绝对定位以父容器的position不是static(默认)的为绝对定位元素的原点,如果没有则以浏览器可视窗口的左上角为原点

绝对定位的原点

　　如果设置dv1的绝对定位,dv1的原点先找父容器dv2,如果父容器dv2的position不是static,则dv1的原点为dv2的左上角,反之向外找到dv3,如果dv3也没有进行定位,一直向外找,直至找到为止,顶级父容器为浏览器可视窗口左上角即原点

　　3 fixed 固定定位

　　就以浏览器可视窗口左上角为原点(暂时认死理),也可以认为是一种特殊的绝对定位,其特点是与父容器无关,不会随着浏览器的滚动条移动,常见形式是右下角的广告弹窗

　　绝对定位与固定定位的js代码对照相对定位代码编写即可

　　注意:设置元素定位的上下左右时,最好不要同时设置上与下或者左与右相反方向的偏移;同时设置相反的偏移属性,左上属性有用,右下属性无用,具体可自测