`

z-index 设置元素的堆叠顺序

    博客分类：
  • css
 
阅读更多
z-index 属性用来设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

  ** 元素可拥有负的 z-index 属性值。
  ** 仅能在定位元素上奏效（例如 position:absolute;）！

设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。就是数学里面的x y z中的z轴~ 

<style type="text/css">
#img1
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
<script type="text/javascript">
function changeStackOrder(){
    $("#img1").style.zIndex="1";
}
</script>
</head>
<body>
<h1>This is a some text.</h1>
<img id="img1" src="/i/eg_bulbon.gif">
<p>Default z-index is 0. Z-index -1 has lower priority.</p>
<input type="button" onclick="changeStackOrder()" value="Change stack order" />
分享到：
| FOUC 文档样式闪烁
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    HTML5&CSS3网页制作：zindex层叠等级属性.pptx

    z-index可以调整重叠定位元素的堆叠顺序，其取值可为正整数、负整数和0。z-index的默认值是0。 解决重叠问题 z-index层叠等级属性 值 描述 auto 默认堆叠顺序与父元素相等。 number 设置元素的堆叠顺序,可为负值。 ...

    CSS z-index 层级关系优先级的概念

    CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也...

    CSS属性探秘系列(七)：z-index

    如果你不是一名csser新手，想必你对z-index的用法应该有个大致的了解了吧，z-index可以控制定位元素在垂直于显示屏方向（Z 轴）上的堆叠顺序，本文不去讲述基本的API如何使用，而是去更深入的了解z-index是如何工作...

    举例详解CSS的z-index属性的使用

    通常认为HTML页面是二维的，但实际上，CSS还有一个z-index属性，允许层叠元素。  所有的盒模型元素都处于三维坐标系中。 除了我们常用的横坐标和纵坐标， 盒模型元素还可以沿着...)按HTML中的出现顺序堆叠 定位元素按

    CSS3定位和浮动详解

    本文为大家分享CSS3定位和浮动的基础概念，与使用方法，供大家参考，具体内容如下 一、定位 1、 css定位： 改变元素在页面上的位置 ...z-index 设置元素的堆叠顺序/用来设置元素的堆叠顺序，越大越在上方/ position的

    BOOTSTRAP时间控件显示在模态框下面的bug修复

    一针见血：修改 bootstrap-datepicker.js...原因：z-index是设置元素的堆叠顺序，从负到正表示从下到上堆叠，这里使用css方法将z-index设置为10,并且为行内样式,用样式表是无法修改的 总结：方法很简单，查找原因的过程

    HTML5图片层叠的实现示例

    z-index：设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。即z-index的值越大显示越靠上。 position:有以下几个值：static，relative，absolute，fixed。 Static:静态定位。如果...

    sourcegraph-css-stacking-contexts:Sourcegraph扩展，突出显示引入新堆栈上下文CSS声明

    如果要在元素上设置十亿的z索引，并且该元素未按堆叠顺序向前移动，请查看其祖先树，并查看其任何父级是否构成堆叠上下文。 如果这样做，那么十亿的z指数对您没有任何好处。 —，Philip Walton，@ Google工程师 此...

    JavaScript蒙板(model)功能的简单实现代码

    •创建一个蒙板, 设置蒙板的堆叠顺序保证能将其它元素盖住 position: absolute; top: 0; left: 0; display: none; background-color: rgba(9, 9, 9, 0.63); width: 100%; height: 100%; z-index: 1000; •设置蒙板...

    css入门笔记

    当内容多，元素区域小的时候，会产生溢出的效果，默认都是纵向溢出 属性：overflow,overflow-x,overflow-y 取值： 1.visible 可见的，默认值，溢出可见 2.hidden 隐藏的，溢出的内容全部隐藏，不可见溢出 3....

    解决Extjs下拉框不显示的问题

    监听下拉（expand）事件，让下拉的dom堆叠顺序（z-index）置前（设为10000）： listeners:{ expand:function(){ this.list.dom.style.zIndex = 10000; } }, 以上所述是小编给大家介绍的解决Extjs下拉框不显示的...

Magicbox
Global site tag (gtag.js) - Google Analytics