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. 浅谈GFC

    Web页面的布局,我们常见的主要有“浮动布局(float)”.“定位布局(position)”.“行内块布局(inline-block)”.“CSS3的多栏布局(Columns)”.“伸缩布局(Fle ...

  2. Linux常用命令——链接命令

    链接命令:ln ln -s [原文件] [目标文件] 命令英文原意:link 功能描述:生成链接文件 选项:-s 创建软链接,也叫符号链接 硬链接特征: 1.拥有相同的i节点和存储block块,可以看 ...

  3. 向appstore提交app流程

    http://www.cocoachina.com/newbie/tutorial/2013/0508/6155.html http://blog.csdn.net/holydancer/articl ...

  4. 移动端开发需要加的meta

    移动端开发需要加的meta和常用的css3媒体查询样式,移动开发中头部要加的一些常用meta. <meta name="viewport" content="ini ...

  5. HDU - 4810 - Wall Painting （位运算 + 数学）

    题意: 从给出的颜料中选出天数个,第一天选一个,第二天选二个... 例如:第二天从4个中选出两个,把这两个进行异或运算(xor)计入结果 对于每一天输出所有异或的和 $\sum_{i=1}^nC_{n ...

  6. Java对象序列化为什么要使用SerialversionUID

    1.首先谈谈为什么要序列化对象 把对象转换为字节序列的过程称为对象的序列化. 把字节序列恢复为对象的过程称为对象的反序列化. 对象的序列化主要有两种用途: 1) 把对象的字节序列永久地保存到硬盘上,通 ...

  7. Datatable 导出到execl 官网demo

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  8. Reading Lists

    * Non-academic 1. Slowing Down to the Speed of Life, by Richard Carlson and Joseph Bailey.2. Your Mo ...

  9. 51NOD 1385凑数字（找规律？）

    >>点击进入原题测试<< 思路:这个题是真的想了蛮久,枚举了一下前一百就发现了规律,要想最短的话就是要构建1234567890这个字符串:刚开始找到的规律从1开始枚举到N,每满 ...

  10. Spring security 5 Authorize Configuration

    1. Spring Security 核心请求,认证配置类 WebSecurityConfigurerAdapter protected void configure(HttpSecurity htt ...