1. 自身特性:

  如left,right,top,bottom定位都是相对于自身位置定位。
  当left与right同时存在,lfet生效。
  当top与bottom同时存在,top生效。
  无侵入,保留原始位置,不会影响其他元素的布局。
  可运用于《自定义拖拽》场景。

2. relative与absolute的关系

  起到限制作用:
  限制内部absolut元素的left/right/top/bottom定位
  限制内部absolut元素的z-index层级
  限制内部absolut元素的可被overflow溢出隐藏

3. relative与absolute的关系:

  只能限制内部fixed元素的z-index层级

4. relative与z-index的关系:

  设置relative元素,可以提高层叠上下文
  当z-index为auto的relative,则不限制内部absoulte元素的层级
  当z-index为数值时,则会创建层叠上下文,从而比较的是两个relative元素的层叠数值大小,
  而不是内部元素的比较。

5. 使用原则:

  尽量避免使用elative
  如使用,尽量缩小控制区域,减少到只包含要限制的内部元素

CSS之 relative 特性的更多相关文章

  1. css css3新特性

    css  css3新特性 一.css3是什么? 我不喜欢把已有的概念从一个地方抄到另一个地方,还是喜欢如下方式. 参考百度百科: http://baike.baidu.com/link?url=z2V ...

  2. CSS(4)---三大特性(继承性，层叠性，优先级)

    CSS(4)---三大特性(继承性,层叠性,优先级) CSS有三大特性分别是: 继承性,层叠性,优先级. 一.继承性 概念 给父元素设置一些属性,子元素也可以使用,这个我们就称之为继承性. 注意 1. ...

  3. CSS 定位 relative && absolute 问题？

    1 1 1 CSS 定位 relative && absolute 问题? 谁能解释一下,为什么div使用 relative是设置right,bottom 后,看不到div 呀,哪里多 ...

  4. 其他css属性和特性

    其他css属性和特性 设置元素的颜色和透明度 下表列出了这些属性. 颜色相关属性 属 性 说 明 值 color 设置元素的前景色 <颜色> opacity 设置颜色的透明度 <数值 ...

  5. CSS的三大特性（继承、层叠和优先级）

    CSS的三大特性(继承.层叠和优先级) 1.css属性的继承 CSS中有些属性是可继承的,何为属性的继承? 一个元素如果没有设置某些属性的值,就会跟随(继承)父元素的属性值.当然,一个元素如果有设置自 ...

  6. CSS position relative absolute fixed

    position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...

  7. css的relative和position探究

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  8. css - position relative与display table-cell深入分析

    在很多时候,想使用 display: table; 以及其子元素使用 display: table-cell 都只是为了使用 vertical-align 这一属性.这是一个很简单的常识,但这次在项目 ...

  9. 前端基础-CSS的各种选择器的特点以及CSS的三大特性

    一. 基本选择器 二. 后代选择器.子元素选择器 三. 兄弟选择器 四. 交集选择器与并集选择器 五. 序列选择器 六. 属性选择器 七. 伪类选择器 八. 伪元素选择器 九. CSS三大特性 一. ...

随机推荐

  1. 201521123082 《Java程序设计》第12周学习总结

    201521123082 <Java程序设计>第12周学习总结 标签(空格分隔): java 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. An ...

  2. Java星星打印三角形小结

    1.直角三角形的打印

  3. 201521123113《Java程序设计》第13周学习总结

    1. 本周学习总结 2. 书面作业 Q1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? 返回的结果 ...

  4. java程序与编译

    Java 源文件(.java)   使用 Java编译器(javac.exe)编译 生成 java字节码文件(.class) 使用 解释执行器(java.exe) 将字节码文件加载到java虚拟机(j ...

  5. Python学习笔记006_异常_else_with

    >>> # try-except语句 >>> >>> # try : >>> # 检测范围 >>> # exc ...

  6. Spring-Struts2-基本集成

    步骤: 1,导入struts2的相关jar包(检查是否有冲突的包,即同一个包有不同的几个版本存在) 2,导入struts2和spring的整合包 struts2-spring-plugin-2.3.4 ...

  7. mysql技能提升篇 - Sqlyog高级应用

    mysql作为绝大部分公司使用的数据库,自然是牛牛牛! 每个人都能设计数据库,都能从删库到跑路.但是,如何做到更好,更快,更准地建立你的mysql数据库,这是个值得关注的问题(尽管很多人已经去搞大数据 ...

  8. vue实例讲解之vue-router的使用

    实例讲解系列之vue-router的使用 先总结一下vue-router使用的基本框架: 1.安装并且引入vue-router 安装:npm install vue-router --save-dev ...

  9. 关于select的一个错误---属性选择器

    错误: jquery 获取下拉框 text='1'的 option 的value 属性值  我写的var t= $("#selectID option[text='1']).val() ; ...

  10. C语言定义从URL中获取键值的接口

    环境:centos7下,对客户端http请求进行解析,来获取有效键值(包括汉字). 头文件 /* 这是一份关于从Http请求信息中提取键值的接口声明的头文件 */ #ifndef _HEAD_H_ # ...