前言:position有5个属性:static、absolute、relative、fixed和inherit。本篇博客主要介绍relative属性,因为似乎很多人对这个属性的理解很模糊,而且不清楚relative与absolute的区别。

《CSS权威指南》上对relative是这样解释的:元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。元素保持定位前的形状自然不用说,那么下面就针对以下两点来说明:

1)元素框偏移某个距离;

2)原本所占的空间仍保留。

元素框偏移某个距离

这句话的意思是:元素相对定位前的位置偏移某个距离。举个例子:

<div id="wrap">
<div id="div1">我是参考div</div>
<div id="div2">我是relative div</div>
</div>
#wrap{
width:300px;
height:300px;
border:1px solid black;
}
#div1,#div2{
width:100px;
height:100px;
}
#div1{
background: red;
}
#div2{
background: yellow;
position: relative;
top:10px;
left:20px;
}

以上代码的显示如左图,黄色div设置了relative,其相对定位前的位置偏移了某个距离。可以想象成右图,灰色部分是黄色div

定位前的位置,黄色div就是相对灰色部分进行定位(absolute是相对其position属性不为static的最近祖先元素定位)。

                             

原本所占的空间仍保留

这一点也是relative与absolute最大的区别:relative不脱离正常文档流,absolute脱离正常文档流。

<div id="wrap">
<div id="div1">我是参考div</div>
<div id="div2">我是relative div</div>
<div id="div3">我是另一个参考div</div>
</div>
#div3{
width:100px;
height:100px;
background: red;
}
/*其他样式不变*/

在黄色div后再放置一个参考div后发现,后一个参考div在放置的时候将黄色div原本的位置(即上右图的灰色部分)给空了出来。同样我们可以想象成右下图,灰色部分没有任何元素,但是在正常文档流中占据一定的位置,后面的元素均要空出此位置。

                            

再仔细想想relative的以上两个性质发现,其与absolute的定位方式其实有类似的部分:我们看到的部分(即黄色部分)不在正常文档流中,可根据出现顺序任意覆盖。但有两点不同:

1)相对的div不同:relative相对自己原本应该在的位置进行定位;absolute相对position不是static的最近祖先元素定位;

2)是否脱离正常文档流:relative表现上是不在正常文档流中,但在正常文档流中保留了原本所占的空间;absolute脱离正常文档流,正常文档流中就当没出出现过此元素

理解position:relative的更多相关文章

  1. 通过案例理解position:relative和position:absolute

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

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

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

  3. 浅谈position: absolute和position:relative

    一.在此先说一下文档流的概念: 1,文档流定义: 百度百科定义:文档流是文档中可显示对象在排列时所占用的位置. 大多网友的理解:元素的位置由元素在 (X)HTML 中的位置决定.将窗体自上而下分成一行 ...

  4. CSS中margin和position:relative的定位问题

    一.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  5. 深入理解position属性&containing block

    一.包含块(Containing Block) 要讲position,首先就涉及到一个概念:包含块. 1.包含块介绍 包含块简单理解就是一个定位参考块,就是"大盒子里套小盒子"中那 ...

  6. 火狐浏览器下,td 直接使用position:relative;和background:;产生的边框消失问题

    消失示例: td{ width:40px; height:28px; position:relative; background:#ccc; } 出现问题 问题原因: 我的理解是各个浏览器之间对于ba ...

  7. css position: relative,absolute具体解释

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

  8. 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题

    解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题   在IE6,IE7下,子元素使用position:relati ...

  9. CSS position relative absolute fixed

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

随机推荐

  1. 2016级算法第六次上机-D.AlvinZH的学霸养成记V

    1081 AlvinZH的学霸养成记V 思路 中等题,计算几何. 这是一个排序问题,按极角排序.可以转化为叉积的应用,对于点A和B,通过叉积可以判断角度大小,共线时再判断距离. 叉积的应用.OA × ...

  2. C#-WebForm-设置div边框为内边框:box-sizing:border-box;

    设置div边框为内边框:box-sizing:border-box;

  3. appium安装与部署

    前提: ①:appium属于C/S架构,代码写在Client端 ②:本章所说的部署讲的是Android设备下的Appium安装与部署 ③:Appium Client的环境是针对python3的 App ...

  4. php 前台生成多维数组 后台批量添加

    同一个地方绊倒两次,记录一下哈 1)前台表单,看 name <div class="tab-pane row " id="tab-1" > < ...

  5. 谈谈数据库的ACID

    一.事务 定义:所谓事务,它是一个操作序列,这些操作要么都执行,要么都不执行,它是一个不可分割的工作单位. 准备工作:为了说明事务的ACID原理,我们使用银行账户及资金管理的案例进行分析. // 创建 ...

  6. mix使用本地依赖

    在看elixir程序设计,书中讲到依赖设置,但是都是要联网,自己希望可以下载到本地电脑硬盘,然后项目要使用就用本地的,不要每次都要下载,因为天朝下载真的不稳 官方看到文档 {:deps_name,pa ...

  7. Java 中 String 的常用方法(二)

    本文介绍剩下的一些常用的 String 中的方法. 1.replace 方法 .replaceFirst 方法和 replaceAll 方法 replace(char oldChar, char ne ...

  8. UVM系统验证基础知识0(Questasim搭建第一个UVM环境)

    版权声明:本文为Times_poem原创文章,转载请告知原博主.特别声明:本文在原文基础上做了简单修改以适应文中举例在questasim下的运行,敬请原博主谅解. 需求说明:UVM系统验证 内容   ...

  9. Flex 生成行号

    private function formatIndexNumber(item:Object, colum:Object):String {      return indexNumLabelFun( ...

  10. 关于css浮动框是否脱离文档流的分析

    在了解浮动属性之前,首先我们先了解一下html中关于display属性的相关知识. display属性常用的有inline, block, inline-block. inline也就是内联的意思. ...