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. Java学习笔记18(Object类)

    Object类是Java中最顶层的父类,所有类都是它的子类,接口不继承它 Object类中的方法: 官方资料:boolean equals(Object obj)  指示其他某个对象是否与此对象&qu ...

  2. git常用使用命令

    Git远程操作详解(from 阮一峰) git clone.git remote.git fetch.git pull.git push git拉取远程分支并创建本地分支 git中文学习文档(详细) ...

  3. Redis 部署主从哨兵 C#使用,实现自动获取redis缓存 实例2

    资料查找https://www.cnblogs.com/tdws/p/5836122.html https://www.cnblogs.com/lori/p/5794454.html private ...

  4. 没有robots.txt文件是否会影响收录呢

    Spider在抓取您的网站之前,会访问您的robots.txt 文件,以确定您的网站是否会阻止 蜘蛛抓取任何网页或网址.如果您的 robots.txt 文件存在但无法访问(也就是说,如果它没有返回 2 ...

  5. C# 获取当前方法的名称空间、类名和方法名称

    1.(new StackTrace()).GetFrame(1) // 0为本身的方法:1为调用方法2.(new StackTrace()).GetFrame(1).GetMethod().Name; ...

  6. 聚类之dbscan算法

    简要的说明: dbscan为一个密度聚类算法,无需指定聚类个数. python的简单实例: # coding:utf-8 from sklearn.cluster import DBSCAN impo ...

  7. webAPI+angularJS文件上传和下载

    开发框架 前端 angularJS1.6 下载和保存文件FileSaver:https://github.com/eligrey/FileSaver.js/ 后端 .net WebAPI 1 导入Ex ...

  8. Java与算法之(1) - 冒泡排序

    冒泡排序法的原理是,每次比较相邻的两个元素,如果它们的顺序错误就把它们交换过来. 例如对4 3 6 2 7 1 5这7个数字进行从小到大的排序,从最左侧开始,首先比较4和3 因为是从小到大排序,4和3 ...

  9. 10 - JavaSE之网络编程

    网络编程 网络通信协议分层思想 为什么要分层呢?因为整个网络协议非常复杂,要涉及到方方面面的知识,而且还有对底层硬件的操作,利用分层的思想,我们可以将复杂的通信协议分割成一层层的形式,上一层可以调用下 ...

  10. A. Duff and Meat

    A. Duff and Meat time limit per test 1 second memory limit per test 256 megabytes input standard inp ...