relative与absolute是position的两个值，本文对这两个值得关系进行了一个小实验

实验一：

首先定义了两个div元素，代码如下所示：

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.   <style type="text/css">
  7.       #div1{
  8.         width: 300px;
  9.         height: 300px;
  10.         background-color: yellow;
  11.       }
  12.  
  13.       #div2{
  14.         width: 50px;
  15.         height: 50px;
  16.         background-color: red;
  17.       }
  18.   </style>
  19. </head>
  20. <body>
  21.   <div id="div1">
  22.     <div id="div2"></div>
  23.   </div>
  24. </body>
  25. </html>

效果如下所示：

现在我想实现把红色的小方块移动到右边，常规的想法就是将div1设置为position：relative，将div2的值设置为position:absolute，然后通过设置div2的top与left可以进行定位。代码如下：

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.   <style type="text/css">
  7.       #div1{
  8.         position: relative;
  9.         width: 300px;
  10.         height: 300px;
  11.         background-color: yellow;
  12.       }
  13.  
  14.       #div2{
  15.         position: absolute;
  16.          top: 50px;
  17.         left: 200px;
  18.         width: 50px;
  19.         height: 50px;
  20.         background-color: red;
  21.       }
  22.   </style>
  23. </head>
  24. <body>
  25.   <div id="div1">
  26.     <div id="div2"></div>
  27.   </div>
  28. </body>
  29. </html>

如果div1不设置position:relative，会出现怎样的效果呢？代码如下：

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.   <style type="text/css">
  7.       #div1{
  8.         /* position: relative; */
  9.         width: 300px;
  10.         height: 300px;
  11.         background-color: yellow;
  12.       }
  13.  
  14.       #div2{
  15.         position: absolute;
  16.          top: 50px;
  17.         left: 200px;
  18.         width: 50px;
  19.         height: 50px;
  20.         background-color: red;
  21.       }
  22.   </style>
  23. </head>
  24. <body>
  25.   <div id="div1">
  26.     <div id="div2"></div>
  27.   </div>
  28. </body>
  29. </html>

效果如下图所示：

效果基本没有变化，严格上讲，实际上是有一定的偏移的，这点可以通过margin进行调整，所以一般不建议过多的使用relative。

那设置div1的position为relative是不是就没有任何用处了呢？其实也不是这样的。

实验二：首先设置div1的position:relative，div2的position：absolute，并设置top与left（之所以设置top与left，是因为top与buttom同时出现的时候，top其决定作用，同理是left），代码如下：

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.   <style type="text/css">
  7.       #div1{
  8.         position: relative;
  9.         width: 300px;
  10.         height: 300px;
  11.         background-color: yellow;
  12.       }
  13.  
  14.       #div2{
  15.         position: absolute;
  16.         top: 250px;
  17.         left: 200px;
  18.         width: 400px;
  19.         height: 400px;
  20.         background-color: red;
  21.       }
  22.   </style>
  23. </head>
  24. <body>
  25.   <div id="div1">
  26.     <div id="div2"></div>
  27.   </div>
  28. </body>
  29. </html>

效果如下图所示：

在这种情况下，正如实验一所示，div1的position几乎不起作用，div2是个自由的小天使，想到哪里就到哪里。但是如果给div1设置top与left之后呢？

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.   <style type="text/css">
  7.       #div1{
  8.         position: relative;
  9.         width: 300px;
  10.         height: 300px;
  11.         background-color: yellow;
  12.         top:50px;
  13.         left: 50px;
  14.       }
  15.  
  16.       #div2{
  17.         position: absolute;
  18.         top: 250px;
  19.         left: 200px;
  20.         width: 400px;
  21.         height: 400px;
  22.         background-color: red;
  23.       }
  24.   </style>
  25. </head>
  26. <body>
  27.   <div id="div1">
  28.     <div id="div2"></div>
  29.   </div>
  30. </body>
  31. </html>

效果如下图所示：

可以发现div2的位置就被div1限制住了，从此div2再也不是自由的小天使了，div2的偏移都是以div1位基准的了。

实验三：div1是包含div2的，可是如果div2定义了position:absolute，那个div2多余的部分就会在div1外部显示出来，即使div1设置了overflow: hidden也不会其作用，但是如果给div1加上position: relative;会怎样呢？代码如下：

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.   <style type="text/css">
  7.       #div1{
  8.  
  9.         width: 300px;
  10.         height: 300px;
  11.         background-color: yellow;
  12.         overflow: hidden;
  13.       }
  14.  
  15.       #div2{
  16.         position: absolute;
  17.         top: 20px;
  18.         left: 20px;
  19.         width: 400px;
  20.         height: 400px;
  21.         background-color: red;
  22.       }
  23.   </style>
  24. </head>
  25. <body>
  26.   <div id="div1">
  27.     <div id="div2"></div>
  28.   </div>
  29. </body>
  30. </html>

给div1加上position:relative，会出现什么样的效果呢？

代码如下：

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.   <style type="text/css">
  7.       #div1{
  8.         position: relative;
  9.         width: 300px;
  10.         height: 300px;
  11.         background-color: yellow;
  12.         overflow: hidden;
  13.       }
  14.  
  15.       #div2{
  16.         position: absolute;
  17.         top: 20px;
  18.         left: 20px;
  19.         width: 400px;
  20.         height: 400px;
  21.         background-color: red;
  22.       }
  23.   </style>
  24. </head>
  25. <body>
  26.   <div id="div1">
  27.     <div id="div2"></div>
  28.   </div>
  29. </body>
  30. </html>

这时div1元素会很好的限制div2的溢出部分。

css的relative与absolute（一）的更多相关文章

  1. css position: relative，absolute具体解释

    关于CSS中 position在布局中非常重要,查了非常多资料都说的非常难理解.以下说说个人的理解: 语法: position: relative | absolute relative: 对象遵循常 ...

  2. css position 应用（absolute和relative用法）

    1.absolute(绝对定位) absolute是生成觉对定位的元素,脱离了文本流(即在文档中已经不占据位置),参照浏览器的左上角通过top,right,bottom,left(简称TRBL) 定位 ...

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

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

  4. 怕忘记了CSS中position的absolute和relative用法

    CSS2.0中的定位确实有时会把人弄糊涂,所以今天给它记下来,同时供以后查阅.下面写的内容有一部分借鉴了w3cschool和divcss5这两个官方网站,在此处特别的说明一下 CSS2.0中posit ...

  5. CSS 定位 relative && absolute 问题？

    1 1 1 CSS 定位 relative && absolute 问题? 谁能解释一下,为什么div使用 relative是设置right,bottom 后,看不到div 呀,哪里多 ...

  6. CSS魔法堂：Absolute Positioning就这个样

    前言 当我们以position:absolute之名让元素脱离Normal flow的控制后,以为通过left和top属性值即可让元素得以无限的自由时,却发现还有各种神秘的力量左右着它的来去,于是我们 ...

  7. 细谈position属性:static、fixed、relative与absolute

    学习WEB有些时日了,对DOM中的定位概念有些模糊,特地花了一个下午的时间搜资料.整理写下这篇随笔. 首先,我们要清楚一个概念:文档流. 简单的讲,就是窗体自上而下分成一行一行,并在每行中按照从左到右 ...

  8. [转]Html position（static、relative、absolute、fixed）

    转自:http://blog.csdn.net/topviewers/article/details/21644305 讲解不错,转载备忘. position的四个属性值: 1.relative2.a ...

  9. div和span、relative和absolute、display和visibility的区别

    一.div和span的区别 div是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容.一般我们在网页通过div来布局定位网页中的每个区块. span是一个内联元素,没有实际意义,它的存在纯粹 ...

随机推荐

  1. mysql数据简单去重

    我有一个 foo 表,定义了如下几个字段:id / a / b,其中 id 是主键,a,b 原本应该具有唯一性, 但因为程序 bug 导致 a,b 内容有重复,现在我要在 a,b 上加唯一索引,请问如 ...

  2. 特殊字符处理（WPF）

    WPF XAML 特殊字符(小于号.大于号.引号.&符号) - Andrew.Wangxu 时间 2013-09-07 18:14:00  博客园-所有随笔区原文  http://www.cn ...

  3. C# WPF DataGrid 隔行变色及内容居中对齐

    C# WPF DataGrid 隔行变色及内容居中对齐. dqzww NET学习0     先看效果: 前台XAML代码: <!--引入样式文件--> <Window.Resourc ...

  4. 不一样的控制面板 GodMode.{ED7BA470-8E54-465E-825C-99712043E01C}

    这是一个快速打开所有控制面板选项的方法.被称作Gode Mode或者Master Control Panel. 步骤很简单: 复制:超级控制面板.{ED7BA470-8E54-465E-825C-99 ...

  5. 【ORM】关于Dapper的一些常见用法

    引言 Dapper是.Net平台下一款小巧玲珑的开源Orm框架,简单实用的同时保持高性能,非常适合我这种喜欢手写SQL的人使用,下面介绍一下如何使用Dapper. 相关资料 Dapper的GitHub ...

  6. python主函数

    Python的人会很不习惯Python没有main主函数. 这里简单的介绍一下,在Python中使用main函数的方法 #hello.py def foo(): str="function& ...

  7. PHP提供的数组比较函数总结

    在我们看PHP手册的时候发现,PHP提供了许多数组元素比较的函数,看起来又多又烦又不好记,现在我们来总结一下: sort() — 本函数对数组进行排序,当本函数结束时数组单元将被从最低到最高重新安排. ...

  8. CodeForces - 138C： Mushroom Gnomes - 2 （线段树&概率&排序）

    One day Natalia was walking in the woods when she met a little mushroom gnome. The gnome told her th ...

  9. Tomcat的安装与环境配置

    首先,下载地址为:http://tomcat.apache.org/,在左侧的列表中找到Download,找到自己要下载的Tomcat的版本.我下载的是Tomcat 7. 进入后出现如上右图界面.我选 ...

  10. mysql 多表查询 左联 去重方法

    1.数据库中的两张表: 2.传统左联查询数据结果如下: 3.替换查询语句可得到去重数据结果: