慕课张鑫旭，笔记之position

1、关于position的relative和absolute的基础使用，两者嵌套时relative下面的absolute相对于relative，如果没有，就相对于整个页面

2、限制层级关于absolute，在没有relative限制的情况下，z-index的值越高，层级越高

3、如果有reelative，并且relative设置了层级关系即设置了z-index，那么absolute上面的z-index没有任何的作用、

4、限制超越overflow：hidden对于absolute不管用，如果有relative则有用

5、relative与fixed的关系，只有一个有作用，对于z-index有作用

6、relative与定位： 1、相对自身，相对于自身位置定位的，而绝对定位时相对于容器的（top：0px；left： 0px）

2、无侵入，margin-top：-100px；和top：-100px，表现形式是一样的，往上偏移100px

对于margin的下面的元素也会形成偏移，而对于relative的top则不会动，保持原来的位置

无侵入定位的应用：自定义拖拽

7、relative设置对立属性的反应： 1、绝对定位是拉伸（自己测一下）

2、相对定位是斗争 top 与bottom 靠近的先气作用

8、relative和层级： relative与z-index层级

1、提高层叠上下文，都是后面的覆盖前面的，想改变就用position：relative提高级别（）

2、新建层叠上下文与层级控制：relative的z-index设置为auto，对里面的absolute没有限制

9、relative的最小化影响原则：指的是尽量降低relative属性对其他元素或布局的潜在影响

1、尽量避免使用relative：

absolute定位不依赖于relative，不需要嵌套，position：absolute就好，距离差异用margin进行偏移

2、relative最小化

单独设置一个div，与之前的img占据一行类似，然后就使用相对定位的绝对定位来实现，没有任何兼容性问题，不会有层级层叠bug。

慕课张鑫旭，笔记之position相关推荐

慕课张鑫旭，笔记之line-height的定义
1.line-height的定义指的是行高,两行文字基线之间的距离 2.基线的定义: 英语里面一行文字的第三条线,baseline 如右图所示 3.两行,演示例子,指的是两行基线之间的距离 4.行高 ...
IE6下png背景不透明——张鑫旭博客读书笔记
从今天开始跟着大牛张鑫旭的步伐,每天进步一点点问题:IE6不支持png背景透明或半透明一.可解决的方法补充:css滤镜主要是用来实现图像的各种特殊效果.(了解) css滤镜的标识符是" ...
张鑫旭html入门,学习张鑫旭前辈课程的有关笔记（二）
上一篇手记是第一部分,共5个属性,接下来的这篇,是另外5个属性. 同样,仅作为大家观看张鑫旭前辈视频的参考文档.作为查阅文档也是可以的. <深入理解vertical-align> vert ...
css 浮动 -张鑫旭博客笔记
原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 本文地址:http://www.zhangxinxu.com/wordpress/?p=594 1 ...
如何写好技术文章（看张鑫旭老师的直播总结
大家好,我是若川.持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列& ...
从张鑫旭的demo中，我学到了图像拉伸的原理
文章收录: 个人网址:http://linglan01.cn/ Github仓库:https://github.com/CatsAndMice/blog/issues 产品经理又有新需求啦,其中有一个 ...
:after伪类 content内容生成经典应用举例——张鑫旭
一.简单说说content内容生成 content内容生成就是通过content属性生成内容,content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容. ...
CSS3 @font-face实现颜色大小可控的三角效果——张鑫旭
一.我之前介绍过的三角实现效果回顾这里所说的三角效果之等腰直角三角形效果(等边三角形有现成字符实现,没什么好说的:还有图片实现三角众人皆知,不予以说明): 1. 字符实现三角效果关于字符实现三角我 ...
张鑫旭html入门,张鑫旭前端模板.html
基于HTML模板以及JSON数据的JavaScript交互 » 张鑫旭-鑫空间-鑫生活 body{overflow-x:hidden;} ul{padding:0; margin:0; list-st ...

慕课张鑫旭，笔记之position

慕课张鑫旭，笔记之position相关推荐

最新文章

热门文章