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. mysqlworkbench 执行update语句报错：You are using safe update mode and you tried to update a table without a WHERE that uses a KEY column

    You are using safe update mode and you tried to update a table without a WHERE that uses a KEY colum ...

  2. CAD创建组（网页版）

    主要用到函数说明: _DMxDrawX::CreateGroup 创建组.如果组名已经存在,就把实体加入组中.详细说明如下: 参数 说明 BSTR pszName 组名.,如果为空,创建匿名组 IDi ...

  3. 【原】thinkphp实现存储session至redis

    Thinkphp\Library\Think\Session\Driver中新建redis缓存文件:Redis.class.php Thinkphp\Common\function.php 中 fun ...

  4. Qt中实现无边框的窗体

    1 自定义窗体类继承自QWidget 2 在构造函数中设置无边框效果 setWindowFlags(Qt::FramelessWindowHint);//无边框 setAttribute(Qt::WA ...

  5. Luogu P2822 组合数问题

    思路 组合数的话,首先肯定是想到杨辉三角啊.不傻的都知道要预处理一张组合数表,但是你以为这样就可以了吗???显然,不可能的.那询问的时候复杂度就成了$\large{O(t*n)}$,凉凉.那咋办,用二 ...

  6. linux常用操作记录

    vim:多行注释 vim中多行注释和多行删除命令,这些命令也是经常用到的一些小技巧,可以大大提高工作效率.   多行注释:   1. 首先按esc进入命令行模式下,按下Ctrl + v,进入列(也叫区 ...

  7. 一：安装centos 7最小编程环境 xfce桌面

    1, u盘制作安装盘------------------------------------------------------安装时, table或者e进入编辑选项    如果不知道你的u盘的盘符 ...

  8. Django-前后台的数据交互

    Django 从后台往前台传递数据时有多种方法可以实现. 最简单的后台是这样的: from django.shortcuts import render def main_page(request): ...

  9. ubuntu_linux自动补全出现问题

    问题:输入: cd p,使用Tab补全,期望进入pub_work目录,虽然自动补全,成功进入目录:却给我打印一连串的字符,纠结: fly@Flyme:~$ cd p+ local cur prev w ...

  10. FZU 1492 地震预测(模拟链表的应用)(Java实现)

    FZU 1492 地震预测(模拟链表的应用)(Java实现) 怀特先生是一名研究地震的科学家,最近他发现如果知道某一段时间内的地壳震动能量采样的最小波动值之和,可以有效地预测大地震的发生. 假设已知一 ...