CSS之 relative 特性
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 特性的更多相关文章
- css css3新特性
css css3新特性 一.css3是什么? 我不喜欢把已有的概念从一个地方抄到另一个地方,还是喜欢如下方式. 参考百度百科: http://baike.baidu.com/link?url=z2V ...
- CSS(4)---三大特性(继承性,层叠性,优先级)
CSS(4)---三大特性(继承性,层叠性,优先级) CSS有三大特性分别是: 继承性,层叠性,优先级. 一.继承性 概念 给父元素设置一些属性,子元素也可以使用,这个我们就称之为继承性. 注意 1. ...
- CSS 定位 relative && absolute 问题?
1 1 1 CSS 定位 relative && absolute 问题? 谁能解释一下,为什么div使用 relative是设置right,bottom 后,看不到div 呀,哪里多 ...
- 其他css属性和特性
其他css属性和特性 设置元素的颜色和透明度 下表列出了这些属性. 颜色相关属性 属 性 说 明 值 color 设置元素的前景色 <颜色> opacity 设置颜色的透明度 <数值 ...
- CSS的三大特性(继承、层叠和优先级)
CSS的三大特性(继承.层叠和优先级) 1.css属性的继承 CSS中有些属性是可继承的,何为属性的继承? 一个元素如果没有设置某些属性的值,就会跟随(继承)父元素的属性值.当然,一个元素如果有设置自 ...
- CSS position relative absolute fixed
position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...
- css的relative和position探究
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- css - position relative与display table-cell深入分析
在很多时候,想使用 display: table; 以及其子元素使用 display: table-cell 都只是为了使用 vertical-align 这一属性.这是一个很简单的常识,但这次在项目 ...
- 前端基础-CSS的各种选择器的特点以及CSS的三大特性
一. 基本选择器 二. 后代选择器.子元素选择器 三. 兄弟选择器 四. 交集选择器与并集选择器 五. 序列选择器 六. 属性选择器 七. 伪类选择器 八. 伪元素选择器 九. CSS三大特性 一. ...
随机推荐
- 201521123082 《Java程序设计》第12周学习总结
201521123082 <Java程序设计>第12周学习总结 标签(空格分隔): java 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. An ...
- Java星星打印三角形小结
1.直角三角形的打印
- 201521123113《Java程序设计》第13周学习总结
1. 本周学习总结 2. 书面作业 Q1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? 返回的结果 ...
- java程序与编译
Java 源文件(.java) 使用 Java编译器(javac.exe)编译 生成 java字节码文件(.class) 使用 解释执行器(java.exe) 将字节码文件加载到java虚拟机(j ...
- Python学习笔记006_异常_else_with
>>> # try-except语句 >>> >>> # try : >>> # 检测范围 >>> # exc ...
- Spring-Struts2-基本集成
步骤: 1,导入struts2的相关jar包(检查是否有冲突的包,即同一个包有不同的几个版本存在) 2,导入struts2和spring的整合包 struts2-spring-plugin-2.3.4 ...
- mysql技能提升篇 - Sqlyog高级应用
mysql作为绝大部分公司使用的数据库,自然是牛牛牛! 每个人都能设计数据库,都能从删库到跑路.但是,如何做到更好,更快,更准地建立你的mysql数据库,这是个值得关注的问题(尽管很多人已经去搞大数据 ...
- vue实例讲解之vue-router的使用
实例讲解系列之vue-router的使用 先总结一下vue-router使用的基本框架: 1.安装并且引入vue-router 安装:npm install vue-router --save-dev ...
- 关于select的一个错误---属性选择器
错误: jquery 获取下拉框 text='1'的 option 的value 属性值 我写的var t= $("#selectID option[text='1']).val() ; ...
- C语言定义从URL中获取键值的接口
环境:centos7下,对客户端http请求进行解析,来获取有效键值(包括汉字). 头文件 /* 这是一份关于从Http请求信息中提取键值的接口声明的头文件 */ #ifndef _HEAD_H_ # ...