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. js实现字符串反转

    方案1: var str = "abcdef"; console.log( str.split("").reverse().join("") ...

  2. PHP 浏览器端输出中文正常，cmd中文乱码

    cmd 运行php脚本乱码问题如果别的编码根据下面的自己换吧!chcp 65001 就是换成UTF-8chcp 936 可以换回默认的GBKchcp 437 是美国英语

  3. c++通过CMake实现debug开关

    刚学cmake,很多东西还不是很懂,不过今天刚刚实现了通过CMake控制debug的开关,兴奋之余记录一下. 背景介绍: 最近参与到了一个大的C++项目,很多代码已经非常成熟,我来添加一些辅助功能,但 ...

  4. 浅谈java浅拷贝和深拷贝

    前言:深拷贝和浅拷贝的区别是什么? 浅拷贝:被复制的对象的所有变量都含有原来对象相同的值,而所有的对其他对象的引用仍然指向原来的对象.换言之, 浅拷贝仅仅复制所考虑的对象,而不复制它所引用的对象.深拷 ...

  5. linux运行jar报错

    通过maven打jar包,然后复制到虚拟机上执行nohup java -jar xxx.jar &命令,运行jar文件,这时抛出了异常 com.mysql.jdbc.exceptions.jd ...

  6. iOS的影片播放 MediaPlayer 和 AVPlayer

    在iOS開發上,如果遇到需要播放影片,如開機動畫…,我們很習慣地會使用MediaPlayer來播放影片,因為很方便使用,所以就一直使用下去.但是隨著客戶的要求越來越嚴苛,尤其是過場動畫或互動效果上的表 ...

  7. C++/C union使用记一下锅

    //首先,学习编程一定要记得加几个群或者加几个讨论组,因为这样你才能不断地进步还有吵架/滑稽 记一下 关于使用union结构体时遇到的一些坑 To zero-initialize an object ...

  8. java环境初级部署及项目搭建

    一.网页地址 Java各版本下载地址: http://www.oracle.com/technetwork/cn/java/archive-139210-zhs.html Eclipse官方下载地址: ...

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

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

  10. Python学习笔记之生成器、迭代器和装饰器

    这篇文章主要介绍 Python 中几个常用的高级特性,用好这几个特性可以让自己的代码更加 Pythonnic 哦 1.生成器 什么是生成器呢?简单来说,在 Python 中一边循环一边计算的机制称为 ...