css位置定位position的absolutive,relative,fixed讲解及锚点链接演示

absolutive:

其位置相对于最近的已定位父元素而言的位置,若父级都没有定位,则以html(根元素)可直接指定 “left”、“top”、“right” 以及 “bottom” 属性。若是以html为定位(即以四个角为坐标轴原点,具体哪个点,取决于你的赋值.

1.left和top则表示以左上角为坐标轴原点.

2.left和bottom表示以左下角为坐标轴原点

3.right和top表示以右上角为坐标轴原点

4.right和bottom表示以右下角为坐标轴原点

 注意:它是浮动的,脱离文档流(即会改变原来的排序)

若right=0,bottom=0表示该模块在当前界面的右下角位置,但若界面过长,当你滚动滚轮会发现,它只是在你

刚刚界面的右下角挂着,会被滚轮滚上去.这也是和fixed的区别,fixed是会一直让你的模块处于屏幕的某位置

不会因为滚轮的滚动,改变位置.

relative:

是相对于自己之前的位置的左上角进行操作 注意:浮动,不会影响原文档流

fixed:

同absolutive一样,fixed是会一直让你的模块处于屏幕的某位置不会因为滚轮的滚动,改变位置.


描点链接

 比如当你访问网页,将网页拖到最下面有个置顶按钮,会快速返回首页.

 <div class="head"  id="head"></div>

<a href="#head">返回顶部</a>

用的还是连接公式,只是href不是网址,是你首模块的id.若你首模块div的id为head,则这里的href则用#head(必须要#号)



  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值