博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css深入理解relative
阅读量:6425 次
发布时间:2019-06-23

本文共 664 字,大约阅读时间需要 2 分钟。

第一讲     relative和absolute相煎关系

         同源性

                   .position:relative

                   .position:absolute

         限制作用

                   1.限制left/top/right/bottom定位

                   2.限制z-index层级

                   3.限制在overflow下嚣张气焰

 

                   1.限制定位,如果没有relative限制,元素定位absolute会可以在任何地方定位

                   2.限制层级 z-index 层级越高

                   3.限制超越overflow

         relative与fixed

                   同源性

                            .position:relative

                            .position:fixed

                   限制作用

                            限制层级

第二讲 relative和定位

         1.相对自身

                   left/top是相对于自身的。

         2.无入侵

                   不会影响到原来的布局

         无侵入定位的作用:自定义拖拽

 

         top/buttom 和left/right对立属性同时存在时的表现

                   1.绝对定位是拉伸

                   2.相对定位是斗争

第三讲relative和层级

         1.提高层叠上下文

 

第四讲relative的最小化影响原则

         所谓relative的最小化影响原则指的是尽量降低relative属性堆其他元素或布局的潜在影响!

         1.尽量避免使用relative

                   absolute定位不依赖relative

         2.relative最小化

                   position:absolute的元素外层加一个标签

                   外层加position:relative 是不会占据任何空间的。

转载于:https://www.cnblogs.com/zhongke/p/6597304.html

你可能感兴趣的文章
Linkedin工程师是如何优化他们的Java代码的(转)
查看>>
winfrom 如何保存datagridview中的某一行数据
查看>>
面向领域驱动的应用开发框架Apworks 2.0发布
查看>>
开发自己的Web服务处理程序(以支持Ajax框架异步调用Web服务方法)
查看>>
ref和out
查看>>
黑客教父详解账号泄露全过程:1亿用户已泄露
查看>>
程序员必须软件
查看>>
Canvas里的globalCompositeOperation
查看>>
解决Unable to locate theme engine in module_path: "pixmap"
查看>>
贝叶斯文本分类c#版
查看>>
Centos安装KDE或GNOME
查看>>
Eclipse & IDEA 中常用的快捷键
查看>>
javascript ---IPhone滑动解锁
查看>>
table固定行和表头
查看>>
<每天读一点职场心理学>读书笔记
查看>>
Android权限大全代码
查看>>
android 判断SIM卡是哪个运营商
查看>>
删除N天前的M(天)个目录 、删除N天前最后修改的文件 ForFiles, dos command 批处理命令cmd/bat...
查看>>
十进制数1~n中1出现的次数
查看>>
PostgreSQL 的 语法分析的理解(五)
查看>>