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. 【Beta】 第三次Daily Scrum Meeting

    一.本次会议为第三次meeting会议 二.时间:10:00AM-10:20AM 地点:禹州楼 三.会议站立式照片 四.今日任务安排 成员 昨日任务 今日任务 林晓芳 查询app提醒功能模块和用户登录 ...

  2. 201521123009 《Java程序设计》第9周学习总结

    1. 本周学习总结 2. 书面作业 本次PTA作业题集异常 Q1:常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现什么异常.需要捕获吗(为什么)?应如何 ...

  3. 201521123019 《java程序设计》 第13周学习总结

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

  4. hibernate 查询方式汇总

    主要摘自  http://blog.sina.com.cn/s/blog_7ffb8dd501014a6o.html ,http://blog.csdn.net/xingtianyiyun/artic ...

  5. 使用tcpdump拦截linux服务端网络数据

    语法范例: tcpdump -vv -i ens3 '((tcp)&&(host 183.239.240.48)&&(port 3001))'  -c 100 -w 1 ...

  6. 关于Tomcat一些启动错误的解决方法

    一.Eclipse tomcat 启动超时: 错误内容: Server JBoss v4.0 at localhost was unable to start within 50 seconds. I ...

  7. Cross the GreateWall方案

    涉及Client端和Server端 服务端:SS搭建 注意:以Ubuntu环境为例 Step1:添加GPG Public key wget -O- http://shadowsocks.org/deb ...

  8. String StringBuffer StringBuilder 之间的区别

    StringBuffer与StringBuilder的区别: StringBuffer是jdk1.0版本出来的,线程安全,效率低 StringBuilder是jdk1.5版本出来的,线程不安全,效率高 ...

  9. 一文搞懂各种 Docker 网络 - 每天5分钟玩转 Docker 容器技术（72）

    前面各小节我们先后学习了 Docker Overaly,Macvaln,Flannel,Weave 和 Calico 跨主机网络方案.目前这个领域是百家争鸣,而且还有新的方案不断涌现. 本节将从不同维 ...

  10. GCD之全局、主线程

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 -(NSString *)fetchData {     [NSThread sleepFo ...