1、首先什么是定位,定位分几种,有什么作用
1、针对html定位,其实跟div有模块的划分区块有异曲同工之妙,它是巧妙的运用元素之间的位置,以及父子元素的位置和在浏览器中的位置来巧妙的完成了位置的设定。
2、定位分为相对定位,绝对定位,固定定位
3、定位相对于浮动更灵活,并且所有的元素都可以采用定位
2、相对定位
position: relative; //若不设置值得时候,保持原来的位置不会变,原先的位置保留
如果设置的top和left那么如下所示
表示为:相对于一开始相邻元素的位置,自己向上和向左移动了100px,它自身没有漂浮。总结为:相对定位变化的只是相对原来的位置,如果重合的话,那么相对定位的优先,也就是漂浮在页面上。
3、绝对定位:
position:absolute ; 如下图所示
表现为:第三个儿子没有了,原因是,若元素设置为绝对定位时,元素会飘起来,原来的会顶替
表现为:相对的是页面原点,所以跑到页面的外面去了
总结:绝对定位的元素不会占据原先的位置,自己会漂浮起来,如果一旦设置偏移量,自己就浮动起来并且相对的是相对定位的祖先元素,或者是body元素
4、固定定位
1、首先最常用的例子就是,回到顶部,他会固定在页面的一个地方,不会随滚动条的移动而移动
设置为: position:fixed;