z-index设置说明

z-index设置说明
z-index越大越在上面
设置最顶层显示z-index:999999;position:relative;float: right;

层叠准则
1谁大谁上：在同以层叠上下文领域，层叠水平值(z-index值)大的在上面。
2 后来居上：当元素的层叠水平一致、层叠顺序相同时，在DOM流中处于后面的元素会覆盖前面的元素。
3 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文。
4每个层叠上下文和兄弟元素独立，当进行层叠变化或渲染时，只需要考虑后代元素。
5对于position: relative / absolute以及Firefox/IE下含有position:fixed声明的定位元素，当其z-index值不为auto的时候，会创建层叠上下文。（具体实例参考下方链接2）
6 z-index 负值的作用：

可访问性隐藏，只需在层叠上下文内的某一个父元素加个背景色即可。
多背景模拟。
定位在元素的后面。

例子如下所示：

<div style="z-index:999999;"><input type="button" value="全屏" style="position:relative;float: right; background-color: powderblue; z-index:999998;" id="fullScreen"><input id="fwidth" type="hidden" /><input id="fheight" type="hidden" /></div>

js单击事件

var fs_flag = false;
var fwidth = "";
var fheight = "";
//全屏功能
$("#fullScreen").click(function () {//兼容谷歌if (!fs_flag & $("#fullScreen").val() == "全屏" && document.documentElement.webkitRequestFullscreen) {document.documentElement.webkitRequestFullscreen();$("#fullScreen").prop("value", "还原");$("#fwidth").val(window.screen.width);//调整为屏幕大小$("#fheight").val(window.screen.height);}if (fs_flag & $("#fullScreen").val() == "还原" && document.webkitExitFullscreen) {document.webkitExitFullscreen();$("#fullScreen").prop("value", "全屏");$("#fwidth").val(hwidth);//还原回初始大小$("#fheight").val(hheight);}fs_flag = !fs_flag;//if (cform && cform.GetFormObj().JsForm.BackGround) {$("html").css("background-size", $("#fwidth").val() + "px    " + $("#fheight").val() + "px");}
});

z-index设置说明相关推荐

arcgis数据的M/Z值设置问题
如何利用arcpy设置数据空间参考中的M/Z值信息空间参考和地理处理 1.M 分辨率(环境设置) 2.M 容差(环境设置) 3.输出包含 M 值(环境设置) 4.Z 分辨率(环境设置) 5.Z 容差 ...
3D打印机Marlin固件双Z轴设置
3D打印机Marlin固件双Z轴设置在3D打印机Marlin固件的最新版本2.1.1中,设置双Z轴和老版本有一些改动.记录一下如何在最新版本的Marlin固件中设置双Z轴. 以MKS GEN_L V ...
html设置z index.html,CSS中z-index属性的使用方法和示例介绍
怎么使用CSS z-index属性?下面本篇文章就来给大家浅谈一下CSS z-index属性的使用方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. z-index属性介绍只有设置 ...
js怎么设置z index.html,HTML5 Canvas set z-index
j0kEli Stone提出了一个问题:HTML5 Canvas set z-index,或许与您遇到的问题类似. 回答者markE给出了该问题的处理方式: Yes..kind of yes. You ...
floquet端口必须沿z轴设置_金秀友佳FMH-630加工中心伸缩Y轴钢板防护罩批发价格...
金秀友佳FMH-630加工中心伸缩Y轴钢板防护罩批发价格钢板防护罩装置使护罩同动且平行(避免了一般剪力式防护罩仍有蛇行的缺点),在高速时可以更平稳.没有振动产生.讯耐高温防护罩可有效地保护丝杠.光杠 ...
好习惯！pandas 8 个常用的 index 设置
在数据处理时,经常会因为index报错而发愁.不要紧,本次来和大家聊聊pandas中处理索引的几种常用方法. 1.读取时指定索引列很多情况下,我们的数据源是 CSV 文件.假设有一个名为的文件dat ...
floquet端口必须沿z轴设置_Ansys Workbench 振动给料机偏心轴的模态分析
张哲维于岩刘传峰公业振动给料机主要由振动机架.弹簧.振动器电机等组成.振动器是由两个特定位置的偏心轴以齿轮相啮合组成,装配时必须使两齿轮按标记相啮合,通过电机驱动,使两偏心轴旋转,从而产生 ...
HTML中z index属性是用来,css中z-index 属性与用法详解
Z-index属性决定了一个HTML元素的层叠级别.元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言.一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部.这个层叠顺序沿着垂 ...
floquet端口必须沿z轴设置_请问CST 2012 floquet中的模式设置
大家好,我用的是CST2012,我已经知道floquet中的TE00和TM00分别代表两种互相正交的线偏振的平面波,那如果我想模拟一束非偏振的平面波入射应该怎么设置? 另外,如果我是用TE00的偏振光 ...
floquet端口必须沿z轴设置_材料的宏微观力学性能习题及答案
习题1 1.1弹塑性力学的研究对象.内容是什么?与材料力学比较,有何异同?其基本假设又是什么? 1. 2如图1.21所示的三角形截面水坝,材料的比重为γ,承受着比重为1γ液体的压力,已求得应力解为 ...

z-index设置说明

z-index设置说明相关推荐

最新文章

热门文章