详谈css定位position中的absolute和fixed以及relative的区别

我们前端经常开发中会遇到定位的问题,因为当前的图层被遮挡,或者需要突破盒子div的束缚,再者悬浮到页面的左右;对于一些初学者来说就不知道怎么用了,明明我想定位到这个地方,结果找不到元素了?

的确,处理以上问题我们就需要先弄明白,css中定位中的absolute和fixed以及relative区别!

relative:相对定位,相对于其父级的定位、或者上一层的位置而言;为什么html会有默认的布局,从做往右,从上向下,你也可以这样理解,所有的盒子都会继承其父级的属性,然后如果html/body有这个一个相对定位的默认属性,那整个页面就会自动排列了;

absolute:绝对定位,相对于其父级的定位,假设父级没有定位,继承了祖父的属性,那么absolute就是相对于其祖父的定位,甚至可以追踪到html/body作为相对参考对象,这个就是为什么你用了绝对定位,却找不到元素的原因了!

fixed:固定定位,相对于浏览器的视图边框,也就是html/body,我们经常用的悬浮窗口,左右对联式窗口,需要利用position:fixed;实现页面的固定,无论浏览器怎么滚动,窗口就在这个位置!!!

有时也会多个配合使用,例如:

1、父级盒子用了:relative,里面的子元素用了absolute,这样的话,这个子元素是相对于父级元素的,relative和absolute配合经常用到banner轮播图的布局中,实现上下层次;

2.父级盒子用relative,里面的元素用了fixed,对比这个例1,fixed的会在父级盒子内固定到一处不会动,页面不会滚动的话,和例1没有任何区别,不过,如果这个父级盒子设置溢出滚动:overflow,overflow-x,overflow-y,那么就不一样了,用了例1的会跟着滚动而消失,而用fixed还会固定到这个盒子的这个位置,页面滚动和它无关,谁都无法改变;

另外,对于绝对定位和固定定位,还有四个属性,非常好玩:top(上),left(左),right(右),bottom(下)

例如:做一个右边的对联式悬浮,离右边浏览器边框10px,离浏览器底部20px;就可以这样写(如下),这样的话,就会被固定到页面的右下角

position:fixed;
right:10px;
bottom:20px;

好了,有不懂的可以评论回复我,可以给你们写案例!

赞(2) 打赏
未经允许不得转载:版权所有@七娃设计室七娃博客 » 详谈css定位position中的absolute和fixed以及relative的区别
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

七娃设计,让设计贴近生活

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏