css中元素的相对定位和绝对定位的区别是什么

一、相对定位(position:relative)

1、相对定位:将盒子的position属性设置为relative;可通过left、top、right、bottom设置偏移量。

相对定位基础用法示例:

我们先在页面设置两个div盒子(第一个红色;第二个蓝色)

html/css中相对定位relative和绝对定位absolute的用法

最初的位置

html/css中相对定位relative和绝对定位absolute的用法

我们将第一个盒子进行相对定位;离左边200px;离顶部50px;

html/css中相对定位relative和绝对定位absolute的用法

得到的效果是;

html/css中相对定位relative和绝对定位absolute的用法

得出结论:

1、红色盒子是相对于盒子最初的位置向左偏移200px,向下偏移50px;

2、盒子偏移后也不会影响其他盒子;偏移后最初的位置会留下一个占位的。

二、绝对定位(position:absolute)

absolute用法示例:

1、我们设置一个div盒子box{设置好高度、边框和离页面顶部的距离};里面还装有两个小盒子,第一个红色,第二个蓝色;

html/css中相对定位relative和绝对定位absolute的用法

最初的位置

html/css中相对定位relative和绝对定位absolute的用法

然后我们让第一个红色盒子设置绝对定位属性{left:100px;top:100px;}

html/css中相对定位relative和绝对定位absolute的用法

效果图如下:

html/css中相对定位relative和绝对定位absolute的用法

结论:1、绝对定位的盒子,最初的位置不会再占用,后面的盒子会填上空缺;

2、在父元素(也就是大盒子box)没有position属性时,子元素(红色盒子)是以屏幕为参照物进行位置的定位的;

从上面所说,我们在大盒子box设置一个position属性时看看有没有什么不同的效果:

html/css中相对定位relative和绝对定位absolute的用法

得到的效果是:

html/css中相对定位relative和绝对定位absolute的用法

由此可见:如果父元素有position属性时;他就会以父元素为参照物进行偏移;当然如果父元素没有position这个属性,他就会一级一级往上找,

绝对定位相对于的位置偏移是发生在上层元素上是否有position这个属性,如果没找到,就相对于整个屏幕。

补充说明:Z-index可以设置层叠的置(绝对定位和相对定位都可以用),越大越在上层。(例如:z-index:1000;)

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:dandanxi6@qq.com

(0)
上一篇 2023年 7月 26日 下午12:31
下一篇 2023年 7月 26日 下午12:38

相关推荐

  • 小米盒子mini如何开机直接看电视直播

    小米盒子mini版自身配备的功能固然丰富和强大,但是安装第三方应用软件能够实现更多的功能拓展!小米盒子mini版搭载GITV牌照资源平台,这样的丰富资源可以轻松享受,但是小米盒子m…

    2023年 1月 8日
  • 百度云有很多资源可是该怎么找

    @努力更新的阿牛 最近总有小伙伴在后台私聊阿牛,让帮忙找某软件或资源,阿牛也都一一回应了。 但授人以鱼不如授人以渔,今天就教大家如何使用百度网盘寻找各种资源,以及解决百度网盘限速的…

    2023年 1月 13日
  • python模拟百度搜索点击链接

    刷百度下拉可以使用自动化工具模拟用户实现操作,在百度搜索框中输入关键词后,自动向下滚动页面,触发百度下拉功能,从而快速获取更多相关搜索词。 具体实现步骤如下: 1. 安装 Pyth…

    2023年 9月 6日
  • 给好友备注什么好听(女朋友给我备注猪要给她备注什么)

    #「闪光时刻」主题征文 二期# 星星,若是来自地狱,那么没有一丝光亮也是正常的吧! 此生不悔入地狱,来世再为天上星,我是来自地狱的星星,愿我的文字可以温暖和治愈你。 说真的,闲来无…

    2023年 4月 4日
  • 私域直播平台是什么意思,私域平台如何做直播

    近几年私域流量的概念更加深入企业经营,由于互联网化的影响,大多数实体企业也不得不在获客和营销上进行创新,采用更符合新型消费习惯的方式进行推广、销售、扩张。加上直播的兴起也凸显出了内…

    2023年 8月 25日
  • microsoftoffice免费版安装流程

    MS Office是我们最常用的办公软件,不管是学习还是工作上难免都要用到。虽然也有国产的WPS来代替,但其始终只是一个模仿品,其兼容性、完善性远远不如MS Office,不少功能…

    2023年 9月 12日
  • 淘宝小白卖家必备的店铺工具有哪些呢

    我知道你们肯定想问一些骚工具,比如说: 拦截中差评工具 瞬间删除差评工具 收到客户不友好信息自动拉黑工具 收到旺旺广告自动定位对方IP,传送HS病毒工具 …… 这些工具目前在我这里…

    2023年 7月 16日
  • 微信的支付密码忘了该怎么办?,微信支付密码忘了怎么找回原密码

    现在大部分人都会用微信,有些小伙伴通常把支付按钮设置为指纹设置,但是有时候需要 用到支付密码时,却发现自己忘记了,如果多次输入错误的密码,系统就会直接锁住,无 法支付。 那我们怎么…

    2023年 3月 19日
  • 10种适合网上兼职赚钱的方式有哪些

    网络调查:各种市场调研公司会在网上发布各种调查,你可以通过回答问卷调查来赚取报酬。 写作:如果你擅长写作,可以在各大自媒体平台、博客、新闻媒体等地方发布自己的文章,通过广告分成或稿…

    互联网 2023年 3月 25日
  • 给大家整理了一些网站

    综合课程类 1、网易公开课 网址 :***/ 特色 :国内外优质公开课,领域丰富,可具体到某一学科 网易公开课是网易公司推出的一个“全球名校视频公开课项目”。在这里,你可以看到很多…

    互联网 2023年 9月 2日