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. Python学习--21天Python基础学习之旅(Day03、Day04)

    关于缩进问题,缩进几个空格都不影响程序解释(不会报错什么的),但一般缩进四个空格是为了可读性和规范. Day03: Chapter 5 1.if语句 1.1条件测试:值为True或False的表达式成 ...

  2. javaweb之删除功能

    对数据库的删除,主要是通过表中的一个数据查询来进行逐个删除,否则会清空整张表. 一.dao层 在dao层加入删除方法 public boolean delete(Course n) { boolean ...

  3. 多态polymorphism，向上转型和动态方法调度有什么用？

    多态有什么用?马 克  -   t   o - w   i  n:https://blog.csdn.net/qq_44639795/article/details/103117332我给大家想了两个 ...

  4. Message: 'geckodriver' executable needs to be in PATH

    1.下载geckodriver.exe:下载地址:mozilla/geckodriver请根据系统版本选择下载:(如Windows 64位系统) 2.下载解压后将getckodriver.exe复制到 ...

  5. 自定义API（Jar包）的创建与使用（简单实现案例）

    @ 目录 学习内容 1. 自定义工具类 2. 导出jar 3. 加载Jar包 4. 调用自定义的API方法 总结 学习内容 1. 自定义工具类 新建一个java项目,然后创建包和工具类StringUt ...

  6. maven项目中各文件都没有报错，但是项目名称有红叉

             项目报错可以看到Problems(可以在Window--Show View--other--输入Problems找到) 一.可能原因     1.项目中各文件没有报错,但是项目名称中 ...

  7. springboot+maven实现模块化编程

    1.创建新项目repo-modele 2.右键Repo_modele -> New -> Module-->next 分别创建bs-web,bs-service,bs-entity, ...

  8. Spring Boot配置文件加载顺序

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.通过spring.config.location改变配置文件的位置 二.外部配置加载顺序 1.使用命令行参数指定加 ...

  9. ethool的使用

    ethtool命令 网络配置 ethtool命令用于获取以太网卡的配置信息,或者修改这些配置.这个命令比较复杂,功能特别多 语法 ethtool [ -a | -c | -g | -i | -d | ...

  10. ansble通过脚本定时清理k8s日志

    环境:环境k8s1.17,ansble通过脚本定时清理k8s日志 [root@tidb-21 delete-k8s-logs]# lsansib-delete.sh delete-logs.sh [r ...