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

实验一：

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

<!doctype html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style type="text/css">

      #div1{

        width: 300px;

        height: 300px;

        background-color: yellow;

      }

      #div2{

        width: 50px;

        height: 50px;

        background-color: red;

      }

  </style>

</head>

<body>

  <div id="div1">

    <div id="div2"></div>

  </div>

</body>

</html>

效果如下所示：

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

<!doctype html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style type="text/css">

      #div1{

        position: relative;

        width: 300px;

        height: 300px;

        background-color: yellow;

      }

      #div2{

        position: absolute;

         top: 50px;

        left: 200px;

        width: 50px;

        height: 50px;

        background-color: red;

      }

  </style>

</head>

<body>

  <div id="div1">

    <div id="div2"></div>

  </div>

</body>

</html>

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

<!doctype html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style type="text/css">

      #div1{

        /* position: relative; */

        width: 300px;

        height: 300px;

        background-color: yellow;

      }

      #div2{

        position: absolute;

         top: 50px;

        left: 200px;

        width: 50px;

        height: 50px;

        background-color: red;

      }

  </style>

</head>

<body>

  <div id="div1">

    <div id="div2"></div>

  </div>

</body>

</html>

效果如下图所示：

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

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

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

<!doctype html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style type="text/css">

      #div1{

        position: relative;

        width: 300px;

        height: 300px;

        background-color: yellow;

      }

      #div2{

        position: absolute;

        top: 250px;

        left: 200px;

        width: 400px;

        height: 400px;

        background-color: red;

      }

  </style>

</head>

<body>

  <div id="div1">

    <div id="div2"></div>

  </div>

</body>

</html>

效果如下图所示：

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

<!doctype html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style type="text/css">

      #div1{

        position: relative;

        width: 300px;

        height: 300px;

        background-color: yellow;

        top:50px;

        left: 50px;

      }

      #div2{

        position: absolute;

        top: 250px;

        left: 200px;

        width: 400px;

        height: 400px;

        background-color: red;

      }

  </style>

</head>

<body>

  <div id="div1">

    <div id="div2"></div>

  </div>

</body>

</html>

效果如下图所示：

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

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

<!doctype html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style type="text/css">

      #div1{

        width: 300px;

        height: 300px;

        background-color: yellow;

        overflow: hidden;

      }

      #div2{

        position: absolute;

        top: 20px;

        left: 20px;

        width: 400px;

        height: 400px;

        background-color: red;

      }

  </style>

</head>

<body>

  <div id="div1">

    <div id="div2"></div>

  </div>

</body>

</html>

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

代码如下：

<!doctype html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style type="text/css">

      #div1{

        position: relative;

        width: 300px;

        height: 300px;

        background-color: yellow;

        overflow: hidden;

      }

      #div2{

        position: absolute;

        top: 20px;

        left: 20px;

        width: 400px;

        height: 400px;

        background-color: red;

      }

  </style>

</head>

<body>

  <div id="div1">

    <div id="div2"></div>

  </div>

</body>

</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. Windows 安装Mysql8.0 绿色包

    〇.准备: MySQL8.0 Windows zip包下载地址:https://cdn.mysql.com//Downloads/MySQL-8.0/mysql-8.0.11-winx64.zip 环 ...

  2. 自己动手写OpenStack的QoS功能(4)

    本文地址:http://blog.csdn.net/spch2008/article/details/9283561 数据库相应操作已完成,对OVS-Plugin进行修改. 在quantum\plug ...

  3. 批量反编译class文件

    首先得进入jad的路径中,一般都放在jdk的安装目录的bin中 进入到该目录中,否则无法使用jad命令. jad -o -r -d F:\src -s java F:\classes\**\*.cla ...

  4. 用find命令查找最近修改过的文件

    Linux的终端上,没有windows的搜索那样好用的图形界面工具,但find命令确是很强大的. 比如按名字查找一个文件,可以用 find / -name targetfilename . 唉,如果只 ...

  5. hive_学习_02_hive整合hbase（失败）

    一.前言 本文承接上一篇:hive_学习_01_hive环境搭建(单机) ,主要是记录 hive 整合hbase的流程 二.环境准备 1.环境准备 操作系统 : linux CentOS 6.8 jd ...

  6. @angular/cli项目构建--httpClient

    app.module.ts update imports: [ HttpClientModule] product.component.ts import {Component, OnInit} fr ...

  7. boost库 bind/function的使用

    Boost::Function 是对函数指针的对象化封装,在概念上与广义上的回调函数类似.相对于函数指针,function除了使用自由函数,还可以使用函数对象,甚至是类的成员函数,这个就很强大了哈 # ...

  8. apache php配置 虚拟目录 和 虚拟主机 多域名配置 原理解析

    虚拟目录配置 就是说,我们放项目放在D盘,F盘,而不是默认的www文件夹下也可以访问.比如这里,我在 D:/PHP/work 放入的项目文件. 在httpd.conf加入: (位置一般是在 </ ...

  9. 使用.NET中的XML注释(二) -- 创建帮助文档入门篇

    一.摘要 在本系列的第一篇文章介绍了.NET中XML注释的用途, 本篇文章将讲解如何使用XML注释生成与MSDN一样的帮助文件.主要介绍NDoc的继承者:SandCastle. 二.背景 要生成帮助文 ...

  10. Wireshark图解教程（简介、抓包、过滤器）【转载】

    原文网址:http://blog.sina.com.cn/s/blog_5d527ff00100dwph.html Wireshark是世界上最流行的网络分析工具.这个强大的工具可以捕捉网络中的数据, ...