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. Vue简易博客总结

    项目结构: 首先,编写博客的导航栏组件BlogHeader.vue: <template> <nav> <ul> <li> <router-lin ...

  2. xmpp使用经验

    IM 标准协议有XMPP\IMPP\PRIM\SIP(SIMPLE)等,其中XMPP基于XML的协议,具备了很好的扩展性(依靠XML的域名空间)并且可以建立在TLS上使用SASL认证. 1.文件比如图 ...

  3. 字符、散列、模拟--P1055 ISBN号码

    题目描述 每一本正式出版的图书都有一个ISBN号码与之对应,ISBN码包括9位数字.1位识别码和3位分隔符,其规定格式如x-xxx-xxxxx-x,其中符号-就是分隔符(键盘上的减号),最后一位是识别 ...

  4. 【汇总】java中数组的声明、初始化及遍历

    java中数组用来存储固定大小的同类型元素 一维数组: 1.数组的声明: //声明一维数组,推荐用第一种 int[] a; int b[]; 2.数据的初始化:有三种初始化方式 (1).静态初始化 / ...

  5. Linux之iptables(六、rich规则)

    其它规则 当基本firewalld语法规则不能满足要求时,可以使用以下更复杂的规则 rich-rules 富规则,功能强,表达性语言 Direct configuration rules 直接规则,灵 ...

  6. lua排序算法

    SEED = ; --随机序列 可任取 NUM = ; --排序规模 --随机序列 初始数据 function GenRnd( seed, n ) --生成随机数 data = {}; local r ...

  7. POJ 1026 置换群的k次幂问题

    题目大意: 给定了一组对应关系,经过k次幂后,得到新的对应关系b[i],然后将给定的字符串上的第i位字符放置到b[i]的位置上, 如果字符串长度不足n就用空格补足,这里的是空格,也就是str[i] = ...

  8. HDU 1540 区间合并线段树

    题目大意: 就是给定一堆位置,进行删除还原,最后找到 t 位置上的最大连续位置 #include <cstdio> #include <cstring> #include &l ...

  9. Python - 对多继承以及super的一些了解

    Python支持多继承,与C++一样都会出现一种问题:子类继承的多个父类又继承了同一个父类,这时就有可能会出现父类构造方法被调用多次的情况.关于这个问题,我找了一些资料,虽然没有亲自全部验证,这里我总 ...

  10. [K/3Cloud]如何解决K3Cloud 2.0审批流提交时报“队列不存在，或您没有足够的权限执行该操……

    按照图上的操作即可解决不可提交的问题,但如果应用服务器是部署在域环境下,应该不会出错,这是微软support上说的