position：absolute这个是绝对定位；
是相对于浏览器的定位.
比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置.
position：relative是相对定位,是相对于前面的容器定位的.这个时候不能用top left在定位.应该用margin.
比如：

 
 

当1固定了位置.1的样式float:left;width:100px; height:800px;
2的样式为float:left; position：relative；margin-left:20px;width:50px;
2的位置在1的右边,距离120px

CSS里面position：relative与position：absolute 区别的更多相关文章

  1. position:relative/static/fixed/absolute定位的区别以及使用场景

    absolute是相对于自己最近的父元素来定位的,relative是相对于自己来定位的 relative 不脱离文档流,absolute 脱离文档流.也就是说:relative 的元素尽管表面上看到它 ...

  2. 通过案例理解position:relative和position:absolute

    w3school过了HTML的知识之后,觉得要自己单纯地去啃知识点有点枯燥,然后自己也很容易忘记,所以便找具体的网站练手便补上不懂的知识点.position:relative和postion:abso ...

  3. position:relative和position:absolute的差别及使用方法

    这几天在做项目时遇到做选项卡的功能时,标题和内容区域的背景颜色不同.且须要选到当前标题时,此标题以下会出现下边框及小三角边框,这样就会超出标题背景颜色需覆盖以下内容区域.这时就须要用到potition ...

  4. 详细讲解CSS中相对定位relative和绝对定位absolute

    很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对 定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对 ...

  5. css里面position:relative与position:absolute的区别

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

  6. position: relative 和 position: absoution 的详解

    position属性指定一个元素(静态的,相对的,绝对或固定)的定位方法的类型 relative:生成相对定位的元素,相对于其正常位置进行定位. 对应下图的偏移 absolute: 生成绝对定位的元素 ...

  7. css中postion的fixed与absolute区别详解

    fixed:固定定位,参照位置是浏览器窗口的左上角,即坐标点为(0px, 0px) absolute:绝对定位,参展位置是离当前元素最近的定位方式为fixed,absolute,relative的祖先 ...

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

    一.相对定位(position:relative) 1.相对定位:将盒子的position属性设置为relative:可通过left.top.right.bottom设置偏移量. 相对定位基础用法示例 ...

  9. css中position:relative的真正理解

    其实话说一直以来也没真正去理解好position:relative的用法的真实意义. 我想很多人实实在在用的多都是position:relative和position:absolute结合起来一起用的 ...

  10. 【CSS】position relative 用法

    Relative是position的一个属性,是相对定位. position的默认值是static,(也就是说对于任意一个元素,如果没有定义它的position属性,那么它的position:stat ...

随机推荐

  1. 用Docker构建MySQL镜像

    构建MySQL镜像 本文目的不仅仅是创建一个MySQL的镜像,而是在其基础上再实现启动过程中自动导入数据及数据库用户的权限设置,并且在新创建出来的容器里自动启动MySQL服务接受外部连接,主要是通过D ...

  2. Python基础之字符的编码

    参考原文 Python廖雪峰 为什么要进行编码? 计算机只能处理二进制数字(0100111),要处理文本,就必须先把文本转为数字才能处理,这个过程就叫编码. 字符的编码 ASCII编码 由于计算机是美 ...

  3. 15Ajax、JSON

    15Ajax.JSON-2018/07/27 1. ThreadLocal 总结:调用该类的get方法,永远返回当前线程放入的数据.线程局部变量. 保证线程安全 (第二阶段day14后半部分视频以及1 ...

  4. oracle打开或者关闭flashback

    1.打开flashback: 关闭数据库 SQL>shutdown immediate; 启动到mount方式 SQL>startup mount; 如果归档没有打开,打开归档[因为fla ...

  5. application对象的使用

    application对象的使用 制作人:全心全意 application对象用于保存所有应用程序中的公有数据.它在服务器启动时自动创建,在服务器停止时销毁.当application对象没有被销毁时, ...

  6. Vue.Draggable实现拖拽效果（快速使用）

    1.下载包:npm install vuedraggable 配置:package.json "dependencies": { "element-ui": & ...

  7. 关于一个css布局的小记录

    这里我们采用一种最简单的 方式,至少我目前认为最简单的方式,使用flex布局来实现 下面是html结构: <div class="box1"> <div clas ...

  8. [bzoj1004][HNOI2008][Cards] (置换群+Burnside引理+动态规划)

    Description 小春现在很清闲,面对书桌上的N张牌,他决定给每张染色,目前小春只有3种颜色:红色,蓝色,绿色.他询问Sun有多少种染色方案,Sun很快就给出了答案.进一步,小春要求染出Sr张红 ...

  9. 3.3.5 boolean类型

        boolean(布尔)类型有两个值:false 和 true ,用来判定逻辑条件.与Python不同的是,Java中的boolean值与整型值之间进行互相转换.       Python中Tu ...

  10. saltstack（七）返回值

    一.自定义创建模块 在base目录下创建_modules目录,你自己编写的模块都可以存放在该目录下,当前目录结构下: 1 2 3 4 5 6 7 8 [root@localhost:]# tree - ...