最近在搞一个视频播放的东西,由于引用youku等视频至少有60s的广告非常恶心,于是想弄一个自己的,并且播放自己的广告,如果自己有服务器空间和带宽的话,用ckplayer就再方便不过了,如果没有的话,我是借助的乐视云,像youku也有开放平台,也可以自定制播放器并且去除广告,不过最大的缺点就是要收费的。乐视云提供免费无限视频空间。于是自己上传视频,在引用乐视云的播放地址就可以了,但是显示广告就没有ckplayer这样的方便了。于是就想到了css中的层,用z-index能很好的解决层的问题,但是最后发现,在个别浏览器中还是不行,比如IE系列,最终发现是embed的问题,IE中默认在上方的,解决方法,就是在embed中添加 wmode="transparent" 即可解决问题。
DIV层、span层等html标签层重叠顺序样式z-index,平时我们使用较少,但也会难免会碰到CSS z-index使用。接下来divcss5介绍z-index从基本属性到设置对象的层叠顺序、重叠顺序,从基础语法到应用案例教程讲解学习z-index。
一、z-index语法与结构
z-index 跟具体数字
如:
div{z-index:100}
注意:z-index的数值不跟单位。
z-index的数字越高越靠前,并且值必须为整数和正数(正数的整数)。
二、z-index使用条件
Z-index在使用绝对定位 position:absolute属性条件下使用才能使用。通常我们让不同的对象盒子以不同顺序重叠排列,我们就是要z-index样式属性。
三、z-index应用案例
为了方便观察z-index样式属性,我们设置3个DIV盒子,分别设置不同css背景颜色,设置相同CSS高度、CSS宽度。分别设置背景颜色为黑色、红色、蓝色。CSS width为100px,css height为50px
1、案例css代码
- /* www.divcs5.com z-index实例 */
- .divcss5{position:relative;}
- .divcss5-1,.divcss5-2,.divcss5-3
- {width:100px;height:50px;position:absolute;}
- .divcss5-1{z-index:10;background:#000;left:10px;top:10px}
- .divcss5-2{z-index:20;background:#F00;left:20px;top:20px}
- .divcss5-3{z-index:15;background:#00F;left:30px;top:30px}
2、html代码片段
- <div class="divcss5-1"></div>
- <div class="divcss5-2"></div>
- <div class="divcss5-3"></div>
3、z-index案例截图
Z-index样式实践实例案例
案例说明:
三个盒子均都使用了绝对定位属性position:absolute样式,并且设置相同的高度和宽度样式。为了便于观察我们使用left、right属性并赋予不同值,让其错落有致。
Divcss5-1盒子背景为黑色,z-index:10
Divcss5-2盒子背景为红色,z-index:20
Divcss5-3盒子背景为蓝色,z-index:15
为可以看见第一个盒子z-index:10,所以重叠在最下层,而第二个盒子z-index:20,值最大所以最上层重叠,第三个盒子设置z-index:15,居中。
四、z-index总结
我们使用z-index重叠顺序样式,在实际DIV+CSS布局时候我们需要绝对定位样式,并且可以使用left、right进行定位,通过不同z-index值实现层重叠顺序排列。
相关推荐
主要介绍了css z-index层重叠顺序使用介绍,需要的朋友可以参考下
CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也...
css里的z-index的使用
...
...
z-index层叠等级属性 z-index层叠等级属性 01 z-index层叠等级属性 当对多个元素同时设置定位时,定位...了解当多元素发生重叠时可使用z-index属性调整重叠顺序 熟知掌握z-index属性的语法格式能熟练运用 总结 THANKS
Css中z-index的实例分折.可以作为CSS Z-INDEX研究的实例。很小很简洁。
z-index属性简介 引用: z-index : auto | number auto:默认值。 number:无单位的整数值,可为负数。 z-index 值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象,z-index 值为正数的...
z-index最大值: IE FireFox Safari的z-index最大值是2147483647 。 Opera的最大值是2147483584.。 IE Safari Opera在超过其最大值时按最大值处理。...0时层不显示 在z-index<-2147483648时溢出实际数字正负不定
抱歉,服务器出了点问题... - 简书屏幕快照 -- 上午...png因为div A的z-index值没有设置,默认就是auto,不会处于堆叠上下中,所以就不会
position定位如果有重叠的时候,z-index愈大,就显示在最上面 此时我们就可以设置div的css样式z-index:99999,那么该div就显示在最前面
stylelint-z-index-value-constraint 用于设置z索引的最小和最大约束值的Stylelint规则。 这是插件的分支。 安装 npm install stylelint-z-index-value-constraint --save-dev 或者 yarn add stylelint-z-index-...
构建项目的时候由于 采用的 antd of vue ui库 ,里面没有类似点击唤醒遮罩层的组件 ,所以自己手写vue组件进行引入 ,主要用的是 css3 z-index 属性 ,通过z-index 值不同进行层级展示。( ps :之前处理过类似需求 ...
经过一番查找对比实践理解,下面就从元素重叠的背景常识及可能原因说起,浅谈下position定位元素的z-index顺序。总结下我目前的理解,希望也能对遇到过类似问题有同样疑惑的你有一点帮助或启发。 元素位置重叠的背景...
NULL 博文链接:https://xiaomogu.iteye.com/blog/1311531
最近在使用 Webpack 打包 css 文件时,发现了一个问题,发现打包后的 z-index 值跟源文件 z-index 不一致。 如下图,左侧是源文件,右侧是打包后的文件: 即使加上 !important,经过 OptimizeCssAssetsPlugin 调用 ...
网页设计-----DIV层运用+CSS样式-(精选文档)
最近写CSS3和js结合,遇到了很多次z-index不生效的情况: 1.在用z-index的时候,该元素没有定位(static定位除外) 2.在有定位的情况下,该元素的z-index没有生效,是因为该元素的子元素后来居上,盖住了该元素,...