position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。

Relative,CSS中的写法是:position:relative;  他的意思是绝对相对定位,他是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。

relative没有跳出文本流,定位是相对于父级和兄弟节点。absolute跳出文本流,是相对于父级且带有定位,如果父级没有定位属性,那么就会往上一级再找是否带定位,找到顶级之后如果还没有定位,就以body定位。

链接:https://www.jianshu.com/p/de4a93429e00

关于position的relative和absolute分别是相对于谁进行定位的的更多相关文章

  1. display值的作用分别是什么?relative和absolute分别是相对谁定位的?

    display值的作用分别是什么? none:元素隐藏,不占据位置 block:该元素显示为块级元素 inline:默认,该元素会被显示为内联元素 inline-block:行内块元素 list-it ...

  2. 前端~定位属性position(relative、absolute、fixed)的分析

    前端~定位属性position(relative.absolute.fixed)的分析 1,简单了解: relative:移动自身时,参考自身的原来位置而移动,移动子元素(子元素设置了absolute ...

  3. CSS里面position:relative与position:absolute 区别

    position:absolute这个是绝对定位:是相对于浏览器的定位.比如:position:absolute:left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览 ...

  4. CSS 浅析position:relative/absolute定位方式

    ## 一.position:relative 相对定位 ## 分两种情况分析: · 无 position: relative: · 有 position: relative. 代码如下图: 显示效果如 ...

  5. position中多次用到了relative和absolute,能不能具体介绍一下这两者的区别?

    position中多次用到了relative和absolute,能不能具体介绍一下这两者的区别? 一个是相对定位,一个是绝对定位. absolute生成绝对定位的元素,相对于 static 定位以外的 ...

  6. 定位position详解:relative与absolute

    定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上.然后通过设 ...

  7. [转]关于position 的 static、relative、absolute、fixed、inherit

    本文转自:http://www.56770.com/faq/list/?id=410 position 有五个值:static.relative.absolute.fixed.inherit. sta ...

  8. 知识点摸清 - - position属性值之relative与absolute

    两者共同特点是: 改变文档流 激活元素left.top.right.bottom.z-index属性 让元素”浮起来“,z-index>0 不同的是: 1.position:relative 会 ...

  9. 细谈position属性:static、fixed、relative与absolute

    学习WEB有些时日了,对DOM中的定位概念有些模糊,特地花了一个下午的时间搜资料.整理写下这篇随笔. 首先,我们要清楚一个概念:文档流. 简单的讲,就是窗体自上而下分成一行一行,并在每行中按照从左到右 ...

随机推荐

  1. scrapy 如何链接有密码的redis scrapy-redis 设置redis 密码 scrapy-redis如何为redis配置密码

    # 使用scrapy_redis的调度器SCHEDULER = "scrapy_redis.scheduler.Scheduler"# 使用scrapy_redis的去重机制DUP ...

  2. .NET面试题整理

    .NET..NET Framework..NET Core和C#的解释各是什么? ASP.NET MVC和ASP.NET Web API的区别是什么? C#中的委托是什么?事件是不是一种委托? 简述P ...

  3. Living Documentation

    Living Documentation Living documentation in legacy systems Living documentation, which comes from t ...

  4. HTML5 Performance

    简介 performance是html5的新特性之一,通过它,页面的开发者们可以非常精确的统计到自己页面的表现情况,从而有针对性的进行优化,提升用户体验. 下面是小姐姐对performance相关AP ...

  5. html dom 转化成图片踩坑记(canvas toDataURL)

    需求 在开发过程中遇到这么一个需求,h5页面需要将一个html dom转化成图片,便于用户保存. 面向百度搜索第三方得 html2canvas 和 dom-to-image 两者在写这篇笔记之前在gi ...

  6. 【uniapp 开发】uni-app 资源在线升级/热更新

    注:本文为前端代码资源热更新.如果是整包升级,另见文档 https://ask.dcloud.net.cn/article/34972 HBuilderX 1.6.5 起,uni-app 支持生成 A ...

  7. Reflect.has检测对象是否拥有某个属性

    Reflect.has({x: 0}, 'x'); // true Reflect.has({x: 0}, 'y'); // false // returns true for properties ...

  8. 解决一次calico异常情况,pod之间访问pod ip不通

    k8s 集群采用二进制安装,cni网络插件用calico通讯问题描述:发现有些pod不是很正常例如: ht13.node正常系统采样 [root@ht6 ~]# cat /etc/redhat-rel ...

  9. 数据库纳管平台DBhouse的技术路线与实践

    为帮助开发者更好地了解和学习前沿数据库技术,腾讯云数据库特推出"DB · TALK"系列技术分享会,聚焦干货赋能创新,邀请数十位鹅厂资深数据库专家每月和您一起深入探讨云数据库的内核 ...

  10. 从实例学习 Go 语言、"并发内容" 学习笔记及心得体会、Go指南

    第一轮学习 golang "并发内容" 学习笔记,Go指南练习题目解析.使用学习资料 <Go-zh/tour tour>.记录我认为会比较容易忘记的知识点,进行补充,整 ...