absolute:脱离原来位置定位.是相对于最近的有定位的父级进行定位;如果没有有定位的父级元素,就相对文档进行定位

relative:保留原来位置进行定位,相对于自己原来的位置进行定位

下面举两个例子

1.

 <style>
*{
margin:0;
padding:0;
}
.box1{
width:100px;
height:100px;
background-color:#000;
position:absolute; }
.box2{
width:150px;
height:150px;
background-color:red;
opacity:0.6;
} </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>

box1:position:absolute,脱离了原来位置定位,box2就移上去了

2

 .box1{
width:100px;
height:100px;
background-color:#000;
position:relative; }
.box2{
width:150px;
height:150px;
background-color:red;
opacity:0.6;
}

box1,position:relative,是保留了原来位置定位,所以box2没有移上去;

那么,什么时候使用absolute,什么时候使用relative?

定位的时候,我们最好先选择参照物,

一般我们用relative作为参照物,而使用absolute来进行定位;

在我们给一个元素设置上position:relative,不设置left,top,right,bottom值,虽然看起来是对这个元素没有什么影响,但是它保留了自己原来的位置,这对后续元素没有什么影响;

absolute:可以任意地调整自己的参照物,更加灵活,所以一般都用于定位

position还有一个值:fixed fixed定位是相对于视口的定位,我们在网页上都见过左右两边不随着滚轮滚动而改变位置的广告栏,这种广告栏就是用fixed定位的。

定位 absolute和relative比较的更多相关文章

  1. Position属性四个值:static、fixed、absolute和relative的区别和用法

    Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...

  2. position属性absolute与relative 详解

    最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记.一.解读absolute与relative ...

  3. css absolute与relative的区别

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. Div CSS absolute与relative的区别小结

    absolute:绝对定位,CSS 写法“ position: absolute; ”,它的定位分两种情况,如下: 1. 没有设定 Top.Right.Bottom.Left 的情况,默认依据父级的“ ...

  5. absolute和relative的几个Demo

    这些例子最好通过FireFox结合FireBug调试查看 1.absolute让元素inline-block化 <!DOCTYPE html> <html xmlns="h ...

  6. position属性absolute和relative理解

    relative:相对于自身静态位置进行定位,不脱离流. absolute:绝对定位,脱离流,如果父元素定义了position属性,无论是absolute.relative还是fixed,都是相对于父 ...

  7. CSS+DIV布局中absolute和relative区别

    原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...

  8. position的absolute与fixed,absolute与relative共同点与不同点

    absolute与fixed 共同点: (1) 改变行内元素的呈现方式,display被置为block: (2) 让元素脱离普通流,不占据空间: (3) 默认会覆盖到非定位元素上 不同点: absol ...

  9. focus、click、blur、display、float、border、absolute、relative、fixed

    onfocus:获取焦点,点击时,按着不放 onclick:点击松开之后,未点击其他处 onblur:点击松开之后,又点击其他处 display:block,none,inline block:单独占 ...

随机推荐

  1. Swift4 检验变量

    创建: 2018/05/03  判断类 public func isKind(of aClass: Swift.AnyClass) -> Bool  是否是aClass或其子类的实例  publ ...

  2. Robot Framework操作mongodb数据库

    RF对mongodb操作需要安装以下两个库: 1.pymongo 可以采用pip install pymongo: (如果下载过慢,可指定下载源,如:http:pypi.douban.com/simp ...

  3. 【loj6034】「雅礼集训 2017 Day2」线段游戏

    #6034. 「雅礼集训 2017 Day2」线段游戏 内存限制:256 MiB 时间限制:1000 ms 标准输入输出 题目类型:传统 评测方式:Special Judge 上传者: 匿名 题目描述 ...

  4. vue中的问题思考

    1.为什么 data 要写成函数,而不允许写成对象? 思考:data是 Vue 实例上的一个属性.2. 对象是对于内存地址的引用.3. 函数有自己的作用域空间. 第一点无可厚非,data属性附着于 V ...

  5. 微信小程序开发常见的拉起外部地图软件进行导航的功能

    <view class="dh" bindtap="mapNavigation" data-addr="{{address}}"> ...

  6. 接口测试01 - HTTP协议报文结构及示例

    HTTP基本架构 用一张简单的流程图来展示HTTP协议的基本架构,以便先有个基础的了解. 1)Web Client可以是浏览器.搜索引擎等等一切基于HTTP协议发起http请求的工具. 2)Web S ...

  7. PV,UV,IP概念

    PV是网站分析的一个术语,用以衡量网站用户访问的网页的数量.对于广告主,PV值可预期它可以带来多少广告收入.一般来说,PV与来访者的数量成正比,但是PV并不直接决定页面的真实来访者数量,如同一个来访者 ...

  8. Python打开目录下所有文件

    用Python打开指定目录下所有文件,统计文件里特定的字段信息. 这里是先进入2017-02-25到2017-03-03目录,然后进入特定IP段目录下,最后打开文件进行统计 import os, gl ...

  9. android开发学习 ------- git - 将代码回滚到任意版本

    不小心将一个东西错误提交到git - 远程仓库上 参考  https://www.cnblogs.com/wancy86/p/5848024.html 你的git可能关联了多个远程仓库,每个关联的代码 ...

  10. 学JAVA第二十四天,Set集合与StringBuilder

    下面的内容需要慢慢看,因为,我的语言表达能力不是很好 首先说Set把,Set集合是一个无序且不允许重复的集合,而且查找效率也是快的可怕的. 但是,有些时候,我们必须要用储存多个相同的值时,Set也是可 ...