码迷,mamicode.com
首页 > Web开发 > 详细

css深入理解relative

时间:2017-03-21 23:58:51      阅读:321      评论:0      收藏:0      [点我收藏+]

标签:标签   影响   理解   存在   限制   css   绝对定位   nbsp   元素定位   

第一讲     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 是不会占据任何空间的。

css深入理解relative

标签:标签   影响   理解   存在   限制   css   绝对定位   nbsp   元素定位   

原文地址:http://www.cnblogs.com/zhongke/p/6597304.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!