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. E20170429-hm

    fold   n/v 折叠 ribbon n 色带 hover  n. 盘旋; 徘徊; vi犹豫 Roll over 打滚; 折:翻滚   pinch ピンチ 捏,掐; finger フィンガー sc ...

  2. hdoj5327【前缀和思想】

    题意: 找给定区间的美丽数,美丽数的意思就是这个数每个位上的数都是唯一的. 思路: 前缀和的思想. 感想: 就是你当前位置代表某个特性的前面的所有和(瞎比比的,说了下感觉).前提是你必须找到这样的特性 ...

  3. 洛谷 P2296 寻找道路【bfs+spfa】

    反向建边bfs出不能到t的点,然后对每个能到这些点的点打上del标记,然后spfa的时候不经过这些点即可 #include<iostream> #include<cstdio> ...

  4. shell getopts

    1, 分类: LINUX getopts命令内置于shell中,可以获取由单个字符所指定的有效命令行参数,单个字符有一个‘ - ’号或‘ + ’号. 简单的说,比如运行命令: iptables -t ...

  5. NFS与AutoNFS实例

    NFS概述: NFS,是Network File System的简写,即网络文件系统.网络文件系统是FreeBSD支持的文件系统中的一种,也被称为NFS. NFS允许一个系统在网络上与他人共享目录和文 ...

  6. RedHat7.2安装matplotlib——之Python.h：没有那个文件或目录

    按理说运行下面一句就可以安装了 pip install matplotlib 但是对于我的redhat7.2+python2.7.5,报了下面的错误 _posixsubprocess.c:3:20: ...

  7. 虚方法(virtual)

    虚方法(virtual) Virtual 关键字用于修饰方法.属性.索引器或事件声明,并且允许在派生类中重写这些对象. 看一段代码: using System ; class A { public v ...

  8. AJPFX关于Class类和Class类实例

    Java程序中的各个Java类属于同一类事物,描述这类事物的Java类就是Class类.对比提问:众多的人用一个什么类表示?众多的Java类用一个什么类表示?人  PersonJava类  Cla ...

  9. ubuntu安装mysql多实例

    想要尝试mysql的读写分离,在云上安装完mysql之后突然想到一个问题:我本机是没有公网IP的. 开始尝试在唯一一台云服务器上安装多个mysql实例. 主要步骤: 1.新建MySQL目录 (1):新 ...

  10. ES6学习笔记(10)----Set和Map数据结构

    参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ Set和Map数据结构 1.Set  基本用法    Set是一种新的数据结构,它的成员都是唯一 ...