关于position:relative,absolute,fixed和static

恶补了一下position的一些知识点,写下自己的理解,见谅。

首先,position是个啥?定位。就大家所知,position有4个值:relative,absolute,fixed和static。在没有设定的情况下,默认为static,所以在没有特殊要求的情况下,可以省略不写。所以就着重讲讲另外三个。

1.relative:

相对定位。(相对自己未设定position时的定位,只会改变自身的定位,不影响其他元素的定位),比如:


但将第20行代码改成<div class="relative"></div>之后显示出来的又是另一个样式(如下):

可以看到,第二个相对于原来定位向左移了其父级元素的10%,至于为何没有向下移动10%,是因为此时其父级元素还没有高度。

还可以将代码改成如下,

,然后再看一下此时的效果,

此时的第二个div相对于它此时的父级元素(第一个div)向下向右都移动了10%。

由此可见,relative(相对定位)是相对于自己的原来的定位(这里用百分比的基数就是其父级元素,如果换成px就更简单了,直接是相对于自身原本的定位与某个方位有了一定px的间距,但是也不会影响其他元素的定位)


2.absolute

绝对定位。

先讲绝对定位有啥特点:相对于static定位以外的第一个父元素进行定位,利用"left","right","bottom","top"进行定位。也就是说,当设置了absolute时,如果浏览器向上找到了任意一个设定了position:relative/absolute/fixed的块,就相对于这个块进行偏移,如果没有,那就相对于浏览器进行偏移,如:


而且我们可以发现,找不到position设置的<p>和<div>重合的地方被<p>标签遮住了,由此可见,设置了absolute会浮在指定位置,并会遮住其页面下方的内容。如果有多个absolute,可以设置z-index。


3.fixed:相对于浏览器的定位。

该元素可以理解为一个被定死的定位,设置了position:fixed;的块不随着滚动条的拉动而变动位置。如:

最开始显示的位置

拉动滚动条显示的位置(可以发现没有变)

-------------------------------------------------------------手----动-----隔----离----------------------------------------------------------------------------

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值