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. java课程设计--猜数字（团队博客）

    java课程设计--猜数字(团队博客) 1.团队名称以及团队成员介绍 团队名称:cz 团队成员:陈伟泽,詹昌锦 团队照片: 2.项目git地址 http://git.oschina.net/Devil ...

  2. 201521123056 《Java程序设计》第14周学习总结

    1. 本周学习总结 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名) 在自己建立的数据库上执行常见SQL语句(截图) 参 ...

  3. Eclipse rap 富客户端开发总结(4)：如何搭建 rap 中文开发环境

    Rap中文开发环境搭建大约分为2个部分 1.  rap国际化,详细参加文章(rap开发经验总结(5)-rap国际化之路) 2.rap自带的JFace ,Dialog 等国际化 1.中文包下载地址: h ...

  4. JavaEE error整理（不断更新）

    该文章用于整理开发中遇到的一些错误,及解决方法,不断整理更新. 1. 缺包异常 异常1:java.lang.NoClassDefFoundError: org/apache/commons/loggi ...

  5. 关于Linux的loop设备

    偶然发现/dev目录里有几个loop设备,一番搜索得知,这是一种伪设备(pseudo-device),它可以把一个文件连接为设备(就像Windows下用虚拟光驱挂载ISO文件). 遂做实验验证: 1. ...

  6. Apache POI

    Apache POI 用Java编写的免费开源的跨平台的 Java API,Apache POI提供API给Java程式对Microsoft Office格式档案读和写的功能.POI为"Po ...

  7. Linux 环境下 MySQ导入和导出MySQL的sql文件

    将服务器上的文件导入或导出还需要使用工具传输到本机中,推荐使用winscp,与xshell搭配使用 1 导入数据库 两种方法 .首先建空数据库 mysql>create database abc ...

  8. 一篇搞定微信分享和line分享

    前言 在h5的页面开发中,分享是不可或缺的一部分,对于一些传播性比较强的页面,活动页之类的,分享功能极为重要.例如,京东等电商年末时会有一系列的总结h5在微信中传播,就不得不提到微信的分享机制. 微信 ...

  9. css预处理器less和scss之sass介绍（二）

    本来打算整理jQuery Mobile来着,但是没有研究明白,所以接着上个周的继续介绍... [scss中的基础语法]   1.scss中的变量 ①声明变量:$变量名:变量值 $width:100px ...

  10. [SDOI2009]HH的项链解题报告

    原题目:洛谷P1972 题目描述 HH 有一串由各种漂亮的贝壳组成的项链.HH 相信不同的贝壳会带来好运,所以每次散步完后,他都会随意取出一段贝壳,思考它们所表达的含义.HH 不断地收集新的贝壳,因此 ...