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

相关推荐

  • 已经删除了的微信好友的聊天记录还能恢复吗

    微信已经成为人们日常生活中必不可少的通讯工具,无论是工作还是生活,我们都会使用微信进行沟通。 然而,有时候我们会不小心删除一些重要的聊天记录,那么已经删除的微信聊天内容记录怎样恢复…

    2023年 9月 24日
  • 我的电脑浏览器主页总是被更改(电脑浏览器主页被改怎么改不回来)

    大家好,我是工具人猫猫。过去一周我把有名的赖皮软件给体验了个遍,安装了这么多软件,我的浏览器主页没被篡改十次也有八次了,每次都要费九牛二虎之力才能改回来,而且每一次的解决办法也不尽…

    2023年 6月 3日
  • 如何用python自动抢微信红包

    目录: 0 引言 1 环境 2 需求分析 3 前置准备 4 抢红包流程回顾 5 代码梳理 6 后记0 引言 提到抢红包,就不得不提Xposed框架,它简直是个抢红包的神器,但使用X…

    2023年 6月 28日
  • 这些卫星地图工具你会用吗,不用花钱免费安装的卫星地图

    看到标题可能在想,下个地图还不简单吗?随便框一下就可以下载了。的确,我们的地图下载器已经让地图下载变得很简单。 比如BIGEMAP大地图软件。在软件中,最常用的莫过于三个工具,矩形…

    2023年 4月 27日
  • coloros13发布都升级了哪些

    不知不觉,ColorOS系统已经诞生近10年,从第一代的“智绘新生”,到去年的ColorOS 12上的“自在无边界”,ColorOS的成长和蜕变,大家也都有目共睹。 作为智能手机操…

    2023年 1月 28日
  • 难用的百度搜索,终于要改了怎么回事

    首先问大家一个问题:你所使用最多的搜索引擎是什么? 不出意外,绝大多数用户的答案肯定是:百度。 百度搜索作为全球最大的中文搜索引擎,并且国内由于无法直接访问 Google 的缘故。…

    2023年 7月 1日
  • 如何查看路由器里面的宽带密码

    宽带使用时间长了,我们容易弄丢宽带密码,刚好现在要升级更换路由器需要用到宽带的账号与密码怎么办?下面我给大家分享一种不用软件进入路由器查看里面的宽带密码。 一、在浏览器的地址栏输入…

    2023年 7月 29日
  • 有什么入手简单的兼职

    面对这些小广告 你是否萌生过刷单赚钱的念头? 如果你信了 可就掉入了骗子精心设置的骗局! 来看看我区发生的真实案例吧! 案例一 2月,马鞍街道王某被拉进一个陌生微信群。群主告知:只…

    2023年 9月 2日
  • c语言中break和continue的用法和区别

    break:满足条件后跳出循环(多层循环一次跳出一层),也就是说先跳出内部循环 main(){ int i=0; char c; while(1) /*设置循环*/ { c=”;…

    互联网 2023年 7月 13日
  • 京东白条怎么使用优惠券

    第一、在京东商城选择想要购买的商品,加入购物车 京东白条主要是在京东体系内的线上商城使用,在京东体系内的线上平台购买商品时可以使用京东白条来进行支付。 京东白条使用比较多的地方就是…

    2023年 3月 22日