1、relative和absolute的相煎关系

　　限制作用：①限制left/top/right/bottom定位；②限制z-index层级；③限制在overflow下的嚣张气焰。

　　relative和fixed限制作用：限制z-index层级。

2、relative和定位

　　特性：①相对自行进行定位；②无侵入，不影响其他元素布局。

　　top/bottom和left/right对立属性同时存在时的表现：top＞bottom left＞right

3、relative和层级

　　提高元素的层叠上下文。

　　新建层叠上下文与层级控制：relative元素的z-index是auto的时候，不会限制子元素的层叠。（IE8+）

4、relative的最小化影响原则

　　定义：尽量降低relative属性对其他元素或者布局的潜在影响。

　　原则：①尽量避免使用relative；②relative最小化，将需要absolute定位的元素放到一个空的relative元素中。

CSS深入理解学习笔记之relative的更多相关文章

  1. CSS深入理解学习笔记之absolute

    1.absolute和float 拥有相同的特性表现: ①包裹性(容器应用之后,可以包裹里面的内容): <!doctype html> <html> <head> ...

  2. CSS深入理解学习笔记之float

    1.float的历史 float设计的初衷仅仅是为了文字环绕效果. 示例代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  3. CSS深入理解学习笔记之overflow

    1.Overflow基本属性 overflow:visible(默认)/hidden/scroll/auto/inherit; visible:超出部分可见. hidden:超出部分隐藏. scrol ...

  4. CSS深入理解学习笔记之vertical-align

    1.vertical-align基本认识 支持的属性值: ①线类:baseline(默认),top,middle,bottom ②文本类:text-top,text-bottom ③上标下标类:sub ...

  5. CSS深入理解学习笔记之margin

    1.margin与容器尺寸 元素尺寸:①可视尺寸 clientWidth(标准):②占据尺寸 margin与可视尺寸:①适用于没有设定width/height的普通block元素:②只适用于水平方向尺 ...

  6. CSS深入理解学习笔记之line-height

    1.line-height的定义 定义:两行文字基线之间的距离. 注:不同字体之间的基线是不同的. 2.line-height与行内框盒子模型 行内框盒子模型: ①内容区域(content area) ...

  7. CSS深入理解学习笔记之z-index

    1.z-index基础 z-index含义:指定了元素及其子元素的"z顺序",而"z顺序"可以决定元素的覆盖顺序.z-index值越大越在上面. z-index ...

  8. CSS深入理解学习笔记之padding

    1.padding与容器尺寸之间的关系 对于block水平元素:①padding值暴走,一定会影响尺寸:②width非auto,padding影响尺寸:③width为auto或box-sizing为b ...

  9. CSS深入理解学习笔记之border

    1.border-width border-width为何不支持百分比:语义和使用场景决定的,现实中各种边框本身的概念就不存在百分比的使用方法. border-width支持关键字:thin.medi ...

随机推荐

  1. php 使用beanstalk 消息队列

    Beanstalkd 消息队列 一.基本信息Beanstalkd,一个高性能.轻量级的分布式内存队列系统,最初设计的目的是想通过后台异步执行耗时的任务来降低高容量Web应用系统的页面访问延迟,支持过有 ...

  2. 【扩展欧几里得】NOIP2012同余方程

    题目描述 求关于 x 的同余方程 ax ≡ 1 (mod b)的最小正整数解. 输入输出格式 输入格式: 输入只有一行,包含两个正整数 a, b,用一个空格隔开. 输出格式: 输出只有一行,包含一个正 ...

  3. 【矩阵快速幂】bzoj1297 [SCOI2009]迷路

    1297: [SCOI2009]迷路 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1407  Solved: 1007[Submit][Status ...

  4. python之 模块与包

    一. 模块 1.模块定义: 将代码量较大的程序分割成多个有组织的.彼此独立但又能互相交互的代码片段,这些自我包含的有组织的代码段就是模块. 2.模块分类: a.标准库(又称内置模块) b.开源模块(又 ...

  5. Nginx配置反向代理

    Nginx可做web服务器,也可做负载均衡使用. 反向代理:应用服务器不直接提供服务,通过nginx服务器处理请求, 转发到代理服务器(Tomcat,Nginx,Apache等) 获取响应交给客户端, ...

  6. LevelDB的源码阅读（二） Open操作

    在Linux上leveldb的安装和使用中我们写了一个测试代码,内容如下: #include "leveldb/db.h" #include <cassert> #in ...

  7. 2017-07-18&19

    [toc] 数据库 for循环里写操作数据库是大忌!尤其是这种情况:一次查询的结果中有一个记录还要继续展开查询,两次查询的记录均不止一条.就很容易写成for循环里操作数据库了.解决办法就是循环里的每条 ...

  8. mysql5.7 设置远程访问

    mysql5.7设置远程访问不是和网上说的一样建个用户赋个权限就可以访问的.比如下边这个就是建用户赋权限,可能在之前的版本可以,但是我在我的mysql上一直不行.为此烦了好久!!!项目都耽误了!! 一 ...

  9. Memory Map

    计算机最重要的功能单元之一是Memory.Memory是众多存储单元的集合,为了使CPU准确地找到存储有某个信息的存储单元,必须为这些单元分配一个相互区别的“身份证号”,这个“身份证号”就是地址编码. ...

  10. AOP及spring AOP的使用

    介绍 AOP是一种概念(思想),并没有设定具体语言的实现. AOP是对oop的一种补充,不是取而代之. 具体思想:定义一个切面,在切面的纵向定义处理方法,处理完成之后,回到横向业务流. 特征 散布于应 ...