网站开发部门工资会计分录,德语网站制作,门户 diy WordPress,上海广告公司工资多少知识点1#xff1a;z-index基础 z-index#xff1a;auto; 默认值 z-index: integer 整数 z-index: inherit 继承 不考虑css3 还有定位元素的z-index才有作用
知识点2#xff1a;z-index与定位元素 无嵌套#xff1a;后来居上#xff0c;哪个大哪个上
//在没有…知识点1z-index基础 z-indexauto; 默认值 z-index: integer 整数 z-index: inherit 继承 不考虑css3 还有定位元素的z-index才有作用
知识点2z-index与定位元素 无嵌套后来居上哪个大哪个上
//在没有添加z-index属性时如果两个图片有重叠默认为图片2覆盖图片1 “后来居上”
//如果添加了z-index则那个元素的z-index值大那个在最上面 “哪个大哪个上”
img src图片1 styleposition: relative; z-index: 2
img src图片2 styleposition: absolute; z-index: 1 有嵌套祖先优先原则z-index: 数字
//虽然图片1的z-index大于图片2的z-index,但是对于嵌套的定位元素z-index遵循祖先优先原则所以图片2优先显示
div styleposition: relative; z-index: 1 //祖先元素的z-index不能为autoimg src图片1 styleposition: relative; z-index: 2
/div
div styleposition: relative; z-index: 1 //祖先元素的z-index不能为autoimg src图片2 styleposition: absolute; z-index: 1
/div
知识点3层叠上下文stacking-context和层叠水平stacking-level重要 层叠上下文页面根元素天生具有层叠上下文称之为“根层叠上下文” z-index值为数值的定位元素也具有层叠上下文 其他属性 层叠水平层叠上下文中的每一个元素都有一个层叠水平决定了同一个层叠上下文中元素在z轴上的显示顺序 层叠水平和z-index不是一个东西普通元素也有层叠水平。 层叠上下文的特性层叠上下文可以嵌套组合成一个分层次的层叠上下文。 每个层叠上下文和兄弟元素独立当进行层叠变化或渲染的时候只需要考虑后代元素。 每个层叠上下文是自成体系的当元素的内容被层叠后整个元素被认为是在父层的层叠顺序中。
知识点4层叠顺序 stacking-order background -- 负z-index -- block块状水平盒子 -- float浮动盒子 -- inline/inline-block -- z-index:auto或z-index:0 -- 正z-index 知识点5z-index与层叠上下文 定位元素默认z-index:auto可以看成z-index:0 z-index不为auto的定位元素会创建层叠上下文 z-index层叠顺序的比较止步于父级层叠上下文
知识点6其他css属性与层叠上下文 能创建层叠上下文的的css属性
div classboxdivimg srclogo.jpg/div
/div
style.box {display: flex; // 1.display: flex 与子元素z-index不为auto 配合使用background:blue}.box div {z-index: 1}.box div img {position: relative; z-index: -1;}
/stylediv classboximg src alt
/div
style.box {background:blue;opacity: .5; // 2.opacity 不等于 1transform: rotate(15deg); // 3.transform 不等于 nonemix-blend-mode: screen; // 4.mix-blend-mode: screenfilter: blur(5px); // 5.filter 不等于 noneisolation: isolate; // 6.isolation: isolateposition: fixed; // 7.position: fixed Chrome等bink/webkit内核的浏览器使用will-change: transform; // 8.will-change: transform-webkit-overflow-scrolling: touch // 9.移动端}.box div img {position: relative; z-index: -1;}
/style
知识点7z-index与其他css属性层叠上下文
background -- 负z-index -- block块状水平盒子 -- float浮动盒子 -- inline/inline-block -- z-index:auto或z-index:0不依赖z-index的层叠上下文 -- 正z-index 不支持z-index的层叠上下文元素的层叠顺序均是z-index:auto级别
依赖z-index值创建层叠上下文的情况 position值为relative/absolute或fixed部分浏览器 displayflex/inline-flex容器的子flex项
知识点8z-index相关实践分享
最小化影响原则 目的避免z-index嵌套层叠关系混乱 原因 1. 元素的层叠关系主要由所在的层叠上下文决定 2. IE7 中z-index为auto也会创建层叠上下文 做法 1. 避免使用定位属性 2. 定位属性从大容器平级分离为私有小容器
不犯二准则 目的避免z-index混乱出现一山又比一山高的样式问题 原因多个协作以及后期维护 做法对于任何非浮层元素避免设置z-index值z-index值没有任何道理需要超过2
组件层级计数器目的避免浮层组件因z-index被覆盖的问题 原因 1. 总会遇到意想不到的高层及元素 2. 组件的覆盖规则具有动态性 做法组件层级计数器方法 JS获取最大z-index,再加1
可访问性隐藏人肉眼不可见但是辅助设备可以识别。z-index负值元素在层叠上下文的背景之上其他元素之下
