一、relative和absolute相煎关系
relative限制absolute
1、限制left/top/right/bottom定位
　　如果父元素有relative，只能根据父元素进行定位
2、限制z-index层级
　　如果relative有z-index，absolute的z-index失效
3、限制在overflow下的嚣张气焰
　　overflow:hidden是防止不了absolute的溢出的。但是配合relative的overflow是可以防止溢出的
relative限制fixed: 只能限制z-index层级
二、relative和定位
两个特性
1、相对自身
left:0,top:0相对自身。其实就是纹丝不动。
relative配合margin定位
<style>

　　div{

　　　　width: 300px;

　　　　height: 50px;

　　　　background: #eee;

　　　　margin-top:20px;

　　}

</style>

<body>

　　<div></div>

　　<div style="position:relative; margin-top:-30px; background: red;"></div>

　　<div></div>

</body>
后面的元素会跟上去，若不是margin-top，而是top
<style>

　　div{

　　　　width: 300px;

　　　　height: 50px;

　　　　background: #eee;

　　　　margin-top:20px;

　　}

</style>

<body>

　　<div></div>

　　<div style="position:relative; top:-30px; background: red;"></div>

　　<div></div>

</body>
第三个元素纹丝不动。
2、无侵入
不会影响其他布局，自己怎么定，其它元素纹丝不动
应用：自定义拖拽
3、top/bottom和left/right对立属性同时存在时的表现是？
绝对定位是拉伸，相对定位是斗争。怎么斗争。如果先设置了top，bottom无效。如果先设置了left，right无效
<style>

　　div{

　　　　width: 300px;

　　　　height: 50px;

　　　　background: #eee;

　　　　margin-top:20px;

　　}

</style>

<body>

　　<div></div>

　　<div style="position:relative; top:-30px; bottom:30px; background: red;"></div>

　　<div></div>

</body>
执行的是top:－30px。先设置者优先，而不是覆盖。
三、relative和层级
1、提高层迭上下文
　　在没有其它外力作用下，一般都是后面的元素覆盖前面的。但是想前面的上前。前面的配合z-index就能起作用。单独的z-index是无效的
2、新建层叠上下文与层级控制
　　relative+z-index:auto，不会限制absolute，默认是auto的（不包括ie6,7）
四、relative的最小化影响准则
尽量降低relative属性对其他元素或布局的潜在影响！
1、在可以单独使用absolute解决问题的时候,不要使用relative,如有偏差,可以配合margin使用
2、一定要使用relative的时候,要保证作用范围最小化

css relative的更多相关文章

  1. css relative设置top为百分比值

    前言: 最近在学习HTML.CSS的过程中,想模仿一下百度首页.发现搜索框这一部分与上下其它元素的空白距离可以随着窗口大小变化(效果如下图所示),于是自己研究了一下并记录下来. 效果实现 <!D ...

  2. CSS 相对/绝对(relative/absolute)定位系列（四）——张鑫旭

    前三篇(1, 2, 3)都是介绍的absolute属性,终于,轮到本文讲讲relative相对定位. 一.relative属性的形象化思维 relative是个看上去低调,有些特殊才能,气场强大,有着 ...

  3. CSS系列：CSS中盒子的浮动与定位

    1. 盒子的浮动 在标准流中,一个块级元素在水平方向会自动伸展,知道包含它的元素的边接:而在竖直方向与相邻元素依次排列,不能并排. CSS中float属性,默认为none.将float属性的值设置为l ...

  4. absolute和relative的几个Demo

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

  5. Css定位-定位

    在CSS中一共有N种定位方式,其中,static ,relative,absolute三种方式是最基本最常用的三种定位方式.他们的基 本介绍如下. static默认定位方式 relative相对定位, ...

  6. 简明的例子讲解position:relative、float、overflow:hidden和inline-block

    标签(空格分隔): css relative float 我们通过一个简单的实验来了解position:relative float overflow:hidden 和 inline-block. 下 ...

  7. RPO(Relative Path Overwrite)

    Conception(Relative vs Absolute) Abosolute Path: "/etc/hosts"(in Linux), "C:\Windows\ ...

  8. [转]【Angular4】基础（二）：创建组件 Component

    本文转自:https://blog.csdn.net/u013451157/article/details/79445138 版权声明:本文为博主原创文章,未经博主允许不得转载. https://bl ...

  9. position属性详解

    内容: 1.position属性介绍 2.position属性分类 3.relative相对定位 4.absolute绝对定位 5.relative和absolute联合使用进行定位 6.fixed固 ...

随机推荐

  1. 3.Exadata 软件体系结构

    整体架构和 smart scan Aasm Ehcc (混合例压缩 和 存储索引) SCAN Service 和 server pool DB SERVER -> DB instance -&g ...

  2. mysql DQL语言操作

    SQL语句的执行顺序:from-where-group by-having-select-order by where 可以筛选多个条件,如 where  A and B 1.排序order by 列 ...

  3. 控制台之console

    控制台中的用法有很多,比如常用的console.log(),还有不常用的 console.warn(). console.error()等,下面对控制台中主要的console方法做一个简单的介绍. 1 ...

  4. 牛客网Java刷题知识点之垃圾回收算法过程、哪些内存需要回收、被标记需要清除对象的自我救赎、对象将根据存活的时间被分为：年轻代、年老代（Old Generation）、永久代、垃圾回收器的分类

    不多说,直接上干货! 首先,大家要搞清楚,java里的内存是怎么分配的.详细见 牛客网Java刷题知识点之内存的划分(寄存器.本地方法区.方法区.栈内存和堆内存) 哪些内存需要回收 其实,一般是对堆内 ...

  5. 使用bind配置DNS服务（CentOS 6.5）

    DNS域名解析服务(Domain Name System)是用于解析域名与IP地址对应关系的服务,功能上可以实现正向解析与反向解析: 正向解析:根据主机名(域名)查找对应的IP地址. 反向解析:根据I ...

  6. android AIDL服务

    这篇文章http://byandby.iteye.com/blog/1026110我们介绍了android的本地服务:它只能由承载它的应用程序使用.现在我们将介绍如何构建可由其他进程通过 RPC 使用 ...

  7. JS识别不同浏览器信息

    总所周知,不同浏览器兼容是不一致的,然而今天我在Coding的时候深深体会到那个痛苦,一样的代码在Firefox里面是没问题的,可以根据索引找到 对应的对象元素然后进行操作,但是同样的却获取不到对象元 ...

  8. JavaScript 闭包初认识

    1.简单的例子 首先从一个经典错误谈起,页面上有若干个div, 我们想给它们绑定一个onclick方法,于是有了下面的代码 <ul id="divTest"> < ...

  9. 项目视图 Project Browser

    项目视图 在这个视图,你可以访问.管理你当前项目资源. 项目视图左侧面板显示项目的文件夹结构的分层列表,当从列表中单击一个文件夹,其内容会显示在面板的右边.你可以点击小三角展开或折叠文件夹,显示他包含 ...

  10. NPOI之C#下载Excel

    Java中这个类库叫POI,C#中叫NPOI,很多从Java一直到.Net平台的类库为了区别大部分都是在前面加个N,比如Hibernate和NHibernate. npoi下载地址 一.使用NPOI下 ...