一、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. D. Match & Catch 后缀自动机 || 广义后缀自动机

    http://codeforces.com/contest/427/problem/D 题目是找出两个串的最短公共子串,并且在两个串中出现的次数只能是1次. 正解好像是dp啥的,但是用sam可以方便很 ...

  2. Kettle集群部署（1台Windows主机和2台Linux服务器）

    不多说,直接上干货! http://blog.csdn.net/jianglushou9763/article/details/70859616

  3. HDU 4171 Paper Route

    Problem Description As a poor, tuition-ridden student, you've decided to take up a part time job as ...

  4. 九度oj题目1027：欧拉回路

    题目1027:欧拉回路 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:2844 解决:1432 题目描述:     欧拉回路是指不令笔离开纸面,可画过图中每条边仅一次,且可以回到起点的一条 ...

  5. BNU7538——Clickomania——————【区间dp】

    Clickomania Time Limit: 10000ms Memory Limit: 32768KB 64-bit integer IO format: %I64d      Java clas ...

  6. （一）安装Python

    一.安装python 打开 Python官网,找到“Download”, 在其下拉菜单中选择自己的平台(Windows/Mac),一般的Linux平台已经自带的Python,所以不需要安装,通过打开“ ...

  7. SpringSecurity 3.2入门（10）自定义权限控制认证及授权的过程

    上一章的代码实现还存在一些问题,如角色表.权限表的用处没有体现出来,但是已经能完成URL拦截功能,后面将会继续完善认证及授权的过程. 认证及授权的过程如下: 1.容器启动,MyInvocationSe ...

  8. 数据类型之Nullable

    Nullable 此结构在 .NET Framework 2.0 版中是新增的.

  9. package.json中dependencies 和devDependencies的差异

    我们在日常开发中,经常会使用到npm安装对应的包,会经常在package.json中看到dependencies 和devDependencies 二者的区别: devDependencies:是你开 ...

  10. 初识Socket通信：基于TCP和UDP协议学习网络编程

    学习笔记: 1.基于TCP协议的Socket网络编程: (1)Socket类构造方法:在客户端和服务器端建立连接 Socket s = new Socket(hostName,port);以主机名和端 ...