首页
学习
活动
专区
工具
TVP
发布

关于H5中的相对定位与绝对定位区别的思考

欢迎点击「算法与编程之美」↑关注我们!

本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。

1 问题描述

在上周给18级两位学弟学妹们布置网页学习任务——让他们使用基础css完成一个简单网页框架的排版设计之后,遇到了两位同学的共同反馈:都有共同的问题——H5的定位属性不知道怎么去使用、怎样去使用。那接下来我就对这个问题进行一系列解析。

2 问题分析

在了解如何使用之前,让我们先了解为什么要使用定位。在一般网页的制作中,都会涉及到div盒子的排版问题。因为设计需求的不同,制作者也会相应选择适合的css属性来进行排版。在目前css的属性中能应用到排版设计中的主要有内边距、外边距、浮动和position定位等。今天主要来讲讲position这一属性。

Position属性的含义是定位类型,后面可以输入的值有:static、relative、absolute、fixed、inherit和sticky,其中前面三个在日常开发中使用较为频繁。下面简单介绍一下这三个值吧!

① position:static

static(没有定位)是position的默认值,元素处于正常的文档流中,会忽略left、top、right、bottom和z-index属性。

② position:relative

relative(相对定位)是指给元素设置相对于原本位置的定位,元素并不脱离文档流,因此元素原本的位置会被保留,其他的元素位置不会受到影响。

③ position:absolute

absolute(绝对定位)是指给元素设置绝对的定位,相对定位的对象可以分为两种情况:

1) 设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute,则这时元素的定位对象为此已设置position属性的祖先元素。

2) 如果并没有设置了position属性的祖先元素,则此时相对于body进行定位。

3 解决方案

行了,话不多讲,我们直接上一段代码来体验relative跟absolute这两个属性值的区别与用法吧

Relation(相对定位):

假如我们对一个元素设置了相对定位,那么首先这个元素还是和其他元素一样,会出现在它该出现的位置,当我们在设置相应的水平或者垂直偏移量之后,它将在相对它在的文档位置进行移动。

这里特别注意:使用相对位移,就算元素偏移了原来的位置,但它依旧占据着之前的空间!

上面三个浮动块,第二个设置了position:relative了的,这时候大家所看到它的位置并没有什么不同。接下来我们设置一个偏移量:left:50px;top:30px;

这时我们可以看到第二块针对它本身位置的起点进行了一个位移,但是它原来所占据的位置依然还在(虚线线框标示的地方),即使我们把偏移量设置的再大一些,使它完全离开原来的位置,它原来位于文档流中的位置仍然会存在,不会被第三个块浮动过来填补掉。同时,它的偏移也不会把别的块从文档流中原来的位置挤开,如果有重叠的地方它会重叠在其它文档流元素之上,而不是把它们挤开,就像图中那样,它已经覆盖在了第三个块之上了!

Absolute:(绝对定位)

被设置了绝对定位的元素,在文档流中是不占据空间的,如果元素设置了绝对定位,那么他在文档流中的位置会被删除,那这个元素到哪去了呢?它浮了起来其实设置了相对定位定位的relative时也会让该元素浮起来,但是他们的不同点在于,相对定位不会删除他本省在文档流中占据的那块空间,而绝对定位会删除该元素在文档流中的位置,完全从文档流中抽出。

如何确定绝对定位的参照物:假如它的父元素设置了除static之外的定位,比如:position:relative;position:absulote;position:fixed;,那么他就会相对它的父元素来定位;如果他的父元素没有设置定位,那么就得看它的元素的父元素是否有设置定位,如果还是没有就继续向更高的祖先元素类推进行寻找,总之它的定位就是相对于设置了除atatic定位之外的定位(eg:position:absulote;等)的第一个祖元素,如果所有的祖元素都没有以上三种定位中的一种定位,那么他就相对于文档body来定位。

让我们来看看效果图:

这是绝对定位之前的效果图:

让我们对class=”div4”的元素设置position-absolute看看效果怎样:

4 总结

在H5的学习中,希望大家掌握好排版的基本操作,为以后网页的制作打下坚实的基础,其中定位这一章也必不可少!希望本篇文章能帮到你!

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181129B00SML00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券