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. Mvc项目部署IIS报错:没有为请求的URL配置默认文档,并且没有在服务器设置目录浏览

    问题原因: 1.iis是在安装完.net framework 之后才安装的,需要进行iis注册,开始--运行--cmd,打开命令行提示符,输入命令如下 C:\Windows\Microsoft.NET ...

  2. [转载自阿里丁奇]各版本MySQL并行复制的实现及优缺点

    MySQL并行复制已经是老生常谈,笔者从2010年开始就着手处理线上这个问题,刚开始两三年也乐此不疲分享,现在再提这个话题本来是难免"炒冷饭"嫌疑.    最近触发再谈这个话题,是 ...

  3. Swagger的简单入门【转载】

    一.Swagger简介 上一篇文章中我们介绍了Spring Boot对Restful的支持,这篇文章我们继续讨论这个话题,不过,我们这里不再讨论Restful API如何实现,而是讨论Restful ...

  4. jQuery之开关灯示例

    准备jquery-3.2.1.js文件 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  5. 微信小程序登陆授权

    小程序前端代码 function WXlogin(){ wx.login({ success: function (code) { wx.getUserInfo({ success:function( ...

  6. IO(文件)处理

    一.文件操作 1)介绍: 计算机系统分为:计算机硬件,操作系统,应用程序三部分. 我们用python或其他语言编写的应用程序若想要把数据永久保存下来,必须要保存于硬盘中,这就涉及到应用程序要操作硬件, ...

  7. Machine Learning - week 3 - Overfitting

    The Problem of Overfitting 如果有太多的 features,假设可能与训练数据太匹配了以致于预测未来的数据不准确.如下图: 解决 overfitting 1. 既然是由太多的 ...

  8. JavaScript正则表达式验证大全(收集)

    以下函数调用方式: ? 1 2 3 4 function check() { var bb = document.getElementById("txt_id").value;// ...

  9. BZOJ:4031: [HEOI2015]小Z的房间

    Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 1103  Solved: 536[Submit][Status][Discuss] Descripti ...

  10. PE 001~010

    题意: 001(Multiples of 3 and 5):对小于1000的被3或5整除的数字求和. 002(Even Fibonacci numbers):斐波那契数列中小于等于4 000 000的 ...