CSS之 relative 特性
2018-06-24 01:57:53来源:未知 阅读 ()
聊聊本身的特性:
- left、right、top、bottom 定位都是相对于自身位置定位
- 当 left、right 同时存在 left 生效
- 当 top、bottom 同时存在 top 生效
- 无侵入,保留原始位置,不会影响其他元素的布局
- 可运用于 《自定义拖拽》
了解 relative 与 absoulte 的关系:
- relative 元素 会限制内部 absoulte 元素的 left、right、top、bottom 定位
- relative 元素 会限制内部 absoulte 元素的 z-index 层级
- relative 元素 会限制内部 absoulte 元素可受 overflow 元素设置
了解 relative 与 fixed 的关系 :
- relative 元素会限制内部 fixed 元素的 z-index 层级
了解 relative 与 z-index 的关系 :
- 设置 relative 的元素,会提高层叠上下文
- 当 z-index 为 auto 的 relative元素 ,则不会限制内部 absoulte 元素的层级
- 当 z-index 为数值时, 则会创建层叠上下文,从而比较的是两个 relative元素的层叠数值大小, 而不是内部元素的比较。
使用注意:
- 尽量避免使用 relative 属性
- 如使用,则尽量缩小控制区域,减少到只包含要限制的内部元素
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash