元素定位解析,相对,绝对,固定定位

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

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

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

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

2、相对定位

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

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

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

3、绝对定位

position:absolute ; 如下图所示

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

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

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

4、固定定位

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

设置为:     position:fixed;

 

 

 

 

 

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值