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. 团队作业8——Beta 阶段冲刺3rd day

    一.当天站立式会议 二.每个人的工作 (1)昨天已完成的工作(具体在表格中) 添加了订单功能,并且对订单功能进行了测试 (2)今天计划完成的工作(具体如下) 添加支付功能 (3) 工作中遇到的困难(在 ...

  2. 201521123083 《Java程序设计》第6周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 1.2 可选:使用常规方法总结其他上课内容. protec ...

  3. One.1

    Github地址:https://github.com/zyp031502148/zyp1 解题思路: 看到数独这个题目的时候,我就想到了平时自己玩数独之后一开始怎么做的,可是发现那样的话需要先出一个 ...

  4. 201521123051《Java程序设计》第六周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...

  5. 201521123088《Java程序设计》第13周学习总结

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

  6. 201521123057 《Java程序设计》第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) ...

  7. 201521123022 《Java程序设计》 第十一周学习总结

    1.本章学习总结 2.书面作业 本次PTA作业题集多线程 Q1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问 Q1.1 除了使用synchronized修饰方法实现互斥同步访问,还 ...

  8. firebug离线安装方法-拖入法

    这里介绍的是如何在Firefox中离线安装firebug插件. 1, 下载firebug离线包, 一般就是一个*.xpi文件; 2, 打开Firefox浏览器,直接将*.xpi文件拖入Firefox浏 ...

  9. memcached readme

    memcache======== http://www.cnblogs.com/jeffwongishandsome/archive/2011/11/06/2238265.html # 命令 ## 存 ...

  10. 第6章 Overlapped I/O， 在你身后变戏法 ---被激发的 Event 对象 -4

    以文件 handle 作为激发机制,有一个明显的限制,那就是没办法说出到底是哪一个 overlapped 操作完成了.如果每个文件 handle 只有一个操作等待决定,上述问题其实并不成为问题.但是如 ...