首页 > 代码库 > css深入理解relative
css深入理解relative
第一讲 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