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. Javascript一句代码实现JS字符串去除重复字符

    需求: 原字符串:abcdabecd 去重后字符串:abcde JS字符串去重,一个简单需求,网上找案例发现都是一大堆代码,对于强迫症的我 实再无法忍受,于是自己手动写出一段代码,完美解决该问题. 代 ...

  2. 【sunday算法】玄学字符串匹配

    和KMP相似,用于字符串的匹配,貌似平均复杂度比KMP快,也比KMP更好理解. 大概意思是: 如果串b被串a包含,那么串a此时与串b匹配的部分一定一样 所以如果从开头开始匹配到不同处时,在a串找中此时 ...

  3. Oracle之 11gR2 RAC 修改监听器端口号的步骤

    Oracle 11gR2 RAC 修改监听器端口号的步骤 说明:192.168.188.181 为public ip1192.168.188.182 为public ip2192.168.188.18 ...

  4. Updates were rejected because the remote contains work that you do(git报错解决方案)

    Updates were rejected because the remote contains work that you do(git报错解决方案) 今天向GitHub远程仓库提交本地项目文件时 ...

  5. 使用 requirejs 打包 jQuery 插件 datetimepicker 的问题记录

    网站之前用的时间选择 UI 实在太丑,而且功能单一,决定全站改用 https://github.com/xdan/datetimepicker/ 里面有好几个 js,奇怪的是,只有 /build 目录 ...

  6. MongoDB批量导入及简单的性能优化

    今天简单分享一下MongoDB使用过程中的一些性能优化,其实并不只适用MongoDB,其他数据库多少也可适用. 首先先随机导入一千万条数据.这里我分段导入的,因为mongo的BsonDocument一 ...

  7. RabbitMQ的应用场景以及基本原理介绍

    1.背景 RabbitMQ是一个由erlang开发的AMQP(Advanved Message Queue)的开源实现. 2.应用场景 2.1异步处理 场景说明:用户注册后,需要发注册邮件和注册短信, ...

  8. python函数定义

    刚学用Python的时候,特别是看一些库的源码时,经常会看到func(*args, **kwargs)这样的函数定义,这个*和**让人有点费解.其实只要把函数参数定义搞清楚了,就不难理解了. 先说说函 ...

  9. Machine Learning - week 4 - 习题

    1. 第一个.,是对的. 第二个.结果只会认出是一类,如图:.但这里是为了举例子,实际上不会恰好是 1.而是选择最大概率表示的类别.所以是错误的. 第三个:所有基于 0,1 的逻辑方程都可以使用神经网 ...

  10. CTF---密码学入门第一题 这里没有key

    这里没有key分值:10 来源: 西普学院 难度:易 参与人数:5577人 Get Flag:1965人 答题人数:2074人 解题通过率:95% 你说没有就没有啊,俺为啥要听你的啊 解题链接: ht ...