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. LindDotNetCore~Mock对实际应用中的意义

    回到目录 Mock在单元测试里的意义 Mock测试就是在测试过程中,对于某些不容易构造或者不容易获取的对象,用一个虚拟的对象来创建以 便测试的测试方法.一个闹钟根据时间来进行提醒服务,如果过了下午5点 ...

  2. H5前端性能测试总结

    测试关注指标 Http请求个数 同一个域名不同浏览器内核.不同版本浏览器,大部分并发请求数是6个: 优化方案: a.雪碧图:即CSS Sprite,也称CSS精灵,是一种CSS图像合并技术,该方法是将 ...

  3. Shell和命令基础

    什么是Shell Shell是系统的用户界面,提供了用户与内核进行交互操作的一种接口(命令解析器),Shell接收用户输入的命令并把它送入到内核去执行,结构如下图 Shell的功能 Shell最重要的 ...

  4. js获取指定时间的前几秒

    最近项目上有一个需求是:根据一张图片的拍摄时间获取到这个时间前二后三的一个五秒钟的视频信息,通过查找相关资料写了一个方法拿来记录分享一下. //指定时间减2秒function reduceTwoS(d ...

  5. 什么时候可以用delete替代delete[]

    针对gcc编译器 C++内存分配和释放函数 //分配单个对象 operator new(std::size_t size) //分配数组对象 operator new[](std::size_t si ...

  6. 进入docker登录psql数据库对特定表进行操作

    查看docker镜像 docker ps 运行镜像的脚本命令 docker exec -it 08 bash # 选择id为08开头的镜像运行bash 登录数据库 (1)直接登录 执行命令:psql ...

  7. 下载的js文件本地编辑器打开中文乱码如何解决

    今天遇到的小问题,已解决,直接上图 下载直接打开是这样的 用记事本打开 另存为utf-8格式 正常了!

  8. django命令(笔记，自己看的）

    新建一个项目,名字为mysite:django-admin.py startproject mysite 新建一个应用App,名字为apppython manage.py startapp learn ...

  9. React入门实例教程

    文章转自:阮一峰 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React ...

  10. Java集合源码分析（三）Vevtor和Stack

    前言 前面写了一篇关于的是LinkedList的除了它的数据结构稍微有一点复杂之外,其他的都很好理解的.这一篇讲的可能大家在开发中很少去用到.但是有的时候也可能是会用到的! 注意在学习这一篇之前,需要 ...