Position定位

本文介绍了CSS中的Position定位,包括fixed、absolute和relative三种方式。fixed定位使元素相对于浏览器窗口定位,即使窗口缩放也不会改变位置。absolute定位基于最近的非static父元素,而relative定位则是相对于元素自身的正常位置进行偏移。这三种定位在网页布局中有着广泛的应用。
摘要由CSDN通过智能技术生成

                                                        Position定位

  在参加网页布局的时候我们经常会用到的position定位,那么它到底有几种定位呢?又有什么效果呢?首先我们要规定元素的定位类型,我们也要知道这个定位属性定义的建立元素布局所用的定位机制。

定位的元素可以是任意的,不过绝对定位或固定定位元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它正常的位置中默认位置偏移,目前我们现在一般使用到的只有四个方法。

下面我们来实践一下

  1. 相当于窗口绝对定位fixed()方法,

 首先我们看到的是两个不同位置的元素,而它们的位置是通过position:fixed;方法改变的,移动的位置通过设置top、bottom、left、right四个属性值来决定偏移位置,而设置的值不仅仅是数值、还可以是关键词、百分比、绝对定位。

图文中fixed()方法给元素生成了绝对定位,而它所生成的绝对定位是相对于浏览器窗口进行定位的,大概可以理为无论你的浏览器页面放大或者放小,它都会根据当前页面大小来进行匹配距离上下

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值