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. ie7下设置z-index无效如何解决？

    ie7下z-index无效的问题之前做练习的时候遇到过,百度解决掉之后就丢脑后了.今天项目中又发现这个bug,无奈又去百度,这次还是记下来,节省了百度的时间还能小装一把... 需求是这样的: 页面中的 ...

  2. Number 数据类型

    //Number 数据类型//包含 整数 小数 NaN(not a number)var a = 1233;var b = 12.34;//1/'a'//把其他数据类型转化成数字,他在转化时,只要字符 ...

  3. [USACO] 打井 Watering Hole

    题目描述 Farmer John has decided to bring water to his N (1 <= N <= 300) pastures which are conven ...

  4. <SpringMvc>入门二 常用注解

    1.@RequestMapping @Target({ElementType.METHOD, ElementType.TYPE}) @Retention(RetentionPolicy.RUNTIME ...

  5. JDBC在Java Web中的应用

    JDBC在Java Web中的应用 制作人:全心全意 在Java Web开发中,JDBC的应用十分广泛.通常情况下,Web程序操作数据库都是通过JDBC实现,即使目前数据库方面的开源框架层出不穷,但其 ...

  6. 第九节：web爬虫之urllib（五）

    第四个模块 robotparser: 主要是用来识别网站的 robots.txt 文件,然后判断哪些网站可以爬,哪些网站不可以爬的,其实用的比较少.

  7. BZOJ 3916 [Baltic2014]friends

    [题解] 暴力枚举添加字符的位置,然后判断去掉这个位置的字符串是否有由两个相同的串拼接而成.本题的n的范围为200W,暴力判断会TLE,所以要使用哈希. #include<cstdio> ...

  8. ［已解决］运行gunicorn失败：[ERROR] Connection in use 127.0.0.1 8080

    最近重新部署了一下应用程序,之后重新运行gunicorn,使用如下命令: gunicorn -b 0.0.0.0:8000 manage:app --reload 之后出现了一堆错误,具体错误内容如下 ...

  9. 2017北京ICPC C题 Graph

    #1629 : Graph 时间限制:4000ms 单点时限:4000ms 内存限制:256MB 描述 The country contains N cities numbered from 1 to ...

  10. FZU 2109 Mountain Number

    http://acm.fzu.edu.cn/problem.php?pid=2109 题意:找出区间[l,r]内满足奇数位的数字大于相邻偶数位数字的个数. 典型的数位dp了,记录一下当前位是奇数位还是 ...