position:absolute这个是绝对定位;
是相对于浏览器的定位。
比如:position:absolute;left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。

position:relative是相对定位,是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。

比如:<div class="1"></div><div class="2"></div>

当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和position:absolute

    w3school过了HTML的知识之后,觉得要自己单纯地去啃知识点有点枯燥,然后自己也很容易忘记,所以便找具体的网站练手便补上不懂的知识点.position:relative和postion:abso ...

  2. position:relative/static/fixed/absolute定位的区别以及使用场景

    absolute是相对于自己最近的父元素来定位的,relative是相对于自己来定位的 relative 不脱离文档流,absolute 脱离文档流.也就是说:relative 的元素尽管表面上看到它 ...

  3. position:relative和position:absolute的差别及使用方法

    这几天在做项目时遇到做选项卡的功能时,标题和内容区域的背景颜色不同.且须要选到当前标题时,此标题以下会出现下边框及小三角边框,这样就会超出标题背景颜色需覆盖以下内容区域.这时就须要用到potition ...

  4. 详细讲解CSS中相对定位relative和绝对定位absolute

    很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对 定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对 ...

  5. position: relative 和 position: absoution 的详解

    position属性指定一个元素(静态的,相对的,绝对或固定)的定位方法的类型 relative:生成相对定位的元素,相对于其正常位置进行定位. 对应下图的偏移 absolute: 生成绝对定位的元素 ...

  6. html/css中相对定位relative和绝对定位absolute的用法

    一.相对定位(position:relative) 1.相对定位:将盒子的position属性设置为relative:可通过left.top.right.bottom设置偏移量. 相对定位基础用法示例 ...

  7. css中position:relative的真正理解

    其实话说一直以来也没真正去理解好position:relative的用法的真实意义. 我想很多人实实在在用的多都是position:relative和position:absolute结合起来一起用的 ...

  8. 【CSS】position relative 用法

    Relative是position的一个属性,是相对定位. position的默认值是static,(也就是说对于任意一个元素,如果没有定义它的position属性,那么它的position:stat ...

  9. CSS--position:relative和position:absolute

    position:relative相对定位 1. 如何定位?每个元素在页面的普通流中会“占有”一个位置,这个位置可以理解为默认值,而相对定位就是将元素偏离元素的默认位置,但普通流中依然保持着原有的默认 ...

随机推荐

  1. Maven学习-优化和重构POM

    在一个复杂的项目中,项目的各个模块存在各种相互依赖关系.优化一个多模块项目的POM最好通过几步来做.总的来说,我们总是寻找一个POM中的重复或者多个兄弟POM中的重复.在多模块项目中依赖重复的模式主要 ...

  2. 个人对于epollhup的理解

    1.原因 由于最近对于异步connect函数的测试,发现提前将一个套接字加入epoll监听队列会不断爆出epollhup事件 2.示例 ........  iEpoll = epoll_create( ...

  3. python课时二

    通过上个博客的学习,相信大家已经对Python是什么东西应该有了相对应的了解,这里也包括Python的一些语法(比如Python在写for循环和if判断的时候都是会有缩进的).这张博客大概会对Pyth ...

  4. angular.js封装的树形指令

    html ul.tree-show sub-transclude-set ng-transclude li.parent(ng-repeat='(key,item) in treeData',ng-i ...

  5. Openstack(企业私有云)万里长征第一步——安装

    一.前言 单位新进了十几台服务器,建了一个高标准的一体化机房,状似刘姥姥进大观园的我,从机房规划到企业私有云搭建一一重头学来,除了机房泥墙其他基本都涉猎到了. 从企业私有云这个名字就能看出这是多么复杂 ...

  6. 微信小程序demo

    微信小程序demo github地址 去年小程序刚发布时特别火,赶潮流做了个demo.感觉小程序开发还是比较简单的,主要是官方文档写得比较好,遗憾的是很多API需要微信认证才能使用. 由于小程序包大小 ...

  7. 使用IDEA部署Myeclipse项目

    IDEA的下载和FREE注册 IDEA 下载地址:IDEA最新版本下载地址 IDEA 注册方法:注册方法 导入Myeclipse项目 IDEA主界面,选择Open,如下图所示 选择Myeclipse项 ...

  8. 16、Collection接口及其子接口Set和List(常用类LinkedList,ArrayList,Vector和Stack)

    16.Collection接口 Collection是最基本的集合接口,一个Collection代表一组Object,即Collection的元素(Elements).一些Collection允许相同 ...

  9. 论MySQL何时使用索引,何时不使用索引

    索引: 使用索引可快速访问数据库表中的特定信息.索引是对数据库表中一列或多列的值进行排序的一种结构,例如 employee 表的姓(name)列.如果要按姓查找特定职员,与必须搜索表中的所有行相比,索 ...

  10. TCP/UDP客户端

    Python 网络编程----模块socekt 在渗透测试的过程中,经常会遇到需要创建一个TCP客户端来连接服务器.发送垃圾数据.进行模糊测试活进行其他任务的情况. 简单的TCP客户端代码: #!/u ...