1、首先什么是定位,定位分几种,有什么作用

       1、针对html定位,其实跟div有模块的划分区块有异曲同工之妙,它是巧妙的运用元素之间的位置,以及父子元素的位置和在浏览器中的位置来巧妙的完成了位置的设定。

       2、定位分为相对定位,绝对定位,固定定位

       3、定位相对于浮动更灵活,并且所有的元素都可以采用定位

2、相对定位

       position: relative;     //若不设置值得时候保持原来的位置不会变原先的位置保留

元素定位解析,相对,绝对,固定定位_相对定位relative元素定位解析,相对,绝对,固定定位_绝对定位position_02

如果设置的top和left那么如下所示

元素定位解析,相对,绝对,固定定位_绝对定位position_03元素定位解析,相对,绝对,固定定位_html定位_04

表示为:相对于一开始相邻元素的位置,自己向上和向左移动了100px,它自身没有漂浮。总结为:相对定位变化的只是相对原来的位置,如果重合的话,那么相对定位的优先,也就是漂浮在页面上。

3、绝对定位

position:absolute ; 如下图所示

元素定位解析,相对,绝对,固定定位_html定位_05元素定位解析,相对,绝对,固定定位_相对定位relative_06

表现为:第三个儿子没有了,原因是,若元素设置为绝对定位时,元素会飘起来,原来的会顶替元素定位解析,相对,绝对,固定定位_绝对定位position_07元素定位解析,相对,绝对,固定定位_固定定位fixed_08

表现为:相对的是页面原点,所以跑到页面的外面去了

总结:绝对定位的元素不会占据原先的位置,自己会漂浮起来,如果一旦设置偏移量,自己就浮动起来并且相对的是相对定位的祖先元素,或者是body元素

4、固定定位

       1、首先最常用的例子就是,回到顶部,他会固定在页面的一个地方,不会随滚动条的移动而移动

设置为:     position:fixed;