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. C#WinCE程序(.NET Compact Framework 3.5)项目重构面向抽象设计

    重构关注点 遵循开闭原则 面向抽象设计 实现设备程序端可动态配置 重构的需求 领导想省事提出需求,将现有PDA程序修改为支持PC端由电器工程师根据实际的生产流程可配置,PDA程序在读取配置文件后动态生 ...

  2. 地址总线、数据总线、寻址能力、字长及cpu位数等概念之间的关系

    地址总线决定了CPU的寻址能力:数据总线的宽度与字长及CPU位数一致. 详细解释见下文: 1.地址总线与寻址能力 要存取数据或指令就要知道数据或指令存放的位置,地址寄存器存储的就是CPU当前要存取的数 ...

  3. Android 根据字符串动态获取资源ID

    1.常用方法public int getResId(String name,Context context){ Resources r = context.getResources(); int id ...

  4. SSM框架开发web项目系列(六) SpringMVC入门

    前言 我们最初的javaSE部分学习后,基本算是入门了,也熟悉了Java的语法和一些常用API,然后再深入到数据库操作.WEB程序开发,渐渐会接触到JDBC.Servlet/Jsp之类的知识,期间可能 ...

  5. ACSA Associate -- 01 Introduction To The Course

    1. 为什么要学习AWS认证? 2. AWS认证的考试是如何组织的? 3. 你需要做些什么? 4. 关于ACSA和ACSA BETA的信息 5. 其他链接 15 Top Paying IT Certi ...

  6. 【最大权闭合子图】bzoj4873 [Shoi2017]寿司餐厅

    4873: [Shoi2017]寿司餐厅 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 369  Solved: 256[Submit][Status ...

  7. ADO对SQL Server 2008数据库的基础操作

    最近在学习ADO与数据库的相关知识,现在我将自己学到的东西整理写出来,也算是对学习的一种复习. 这篇文章主要说明如何遍历某台机器上所有的数据库服务,遍历某个服务中所有的数据库,遍历数据库中的所有表以及 ...

  8. BaseServer的介绍

    服务器类型 5种类型:BaseServer,TCPServer,UnixStreamServer,UDPServer,UnixDatagramServer.注意:BaseServer不直接对外服务. ...

  9. python实现类jq的json路径过滤

    开发过程中访问接口时经常用到jq来过滤json,用着觉得不是很爽,于是自己搞一个舒服的 ^_^ 先说需求: 输入:参数1:被过滤对象(json.dict.list), 参数2:过滤路径 输出:过滤结果 ...

  10. 使用elk转存储日志

    ELK指的是由Elastic公司提供的三个开源组件Elasticsearch.Logstash和Kibana. Logstash:开源的服务器端数据处理管道,能够同时 从多个来源采集数据.转换数据,然 ...