文档章节

CSS z-index 属性 控制div上下层次

一枚Sir
 一枚Sir
发布于 2014/06/13 10:13
字数 611
阅读 2668
收藏 1
点赞 0
评论 0

CSS z-index 属性 控制div上下层次

CSS中 z-index

z-index越大则显示在页面的最上面

CSS z-index 属性

http://www.w3school.com.cn/css/pr_pos_z-index.asp: 

定义和用法

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释:元素可拥有负的 z-index 属性值

注释:Z-index 仅能在定位元素上奏效(例如 position:absolute;)!

说明

该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远

默认值: auto
继承性: no
版本: CSS2
JavaScript 语法: object.style.zIndex="1"

实例

设置图像的 z-index:

img
  {
  position:absolute;
  left:0px;
  top:0px;  z-index:-1;
  }

TIY

<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<img src="/i/eg_smile.gif" />
<p>由于图像的 z-index 是 -1,因此它在文本的后面出现。</p>
</body>
</html>
  

浏览器支持

所有主流浏览器都支持 z-index 属性

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

可能的值

描述
auto 默认。堆叠顺序与父元素相等。
number 设置元素的堆叠顺序。
inherit 规定应该从父元素继承 z-index 属性的值。

 

TIY 实例

  • Z-index

  • Z-index 可用于将在一个元素放置于另一元素之后。

<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
</head>

<body>
<h1>这是一个标题</h1>
<img class="x" src="/i/eg_mouse.jpg" /> 
<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>
</body>

</html>

 

  • Z-index

  • 上例中的元素已经更改了 Z-index。

<html>
<head>
<mce:style type="text/css"><!--
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:1
}
--></mce:style><style type="text/css" mce_bogus="1">img.x
{
position:absolute;
left:0px;
top:0px;
z-index:1
}</style>
</head>

<body>
<h1>这是一个标题</h1>
<img class="x" src="/i/eg_mouse.jpg" mce_src="i/eg_mouse.jpg" /> 
<p>默认的 z-index 是 0。Z-index 1 拥有更高的优先级。</p>
</body>

</html>
 

 

相关页面

CSS 教程:CSS 定位

HTML DOM 参考手册:zIndex 属性

CSS 参考手册

改变元素的堆叠顺序:

http://www.w3school.com.cn/htmldom/prop_style_zindex.asp

<html>
<head>
<style type="text/css">
#img1
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
<script type="text/javascript">
function changeStackOrder()
{
document.getElementById("img1").style.zIndex="1";
}
</script>
</head>
<body>

<h1>This is a Heading</h1>

<img id="img1" src="bulbon.gif" width="100" height="180">

<p>Default z-index is 0. Z-index -1 has lower priority.</p>

<input type="button" onclick="changeStackOrder()"
value="Change stack order" />

</body>
</html>

© 著作权归作者所有

共有 人打赏支持
一枚Sir
粉丝 117
博文 207
码字总数 350904
作品 0
朝阳
架构师
HTML中的布局方式:absolute、relative、fixed、static

在CSS中关于定位的内容是: position:relative | absolute | static | fixed static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级,这是默认值。 relative(相对定...

长平狐
2013/12/25
3.4K
0
css position:static 的使用

relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置通过top,bottom,left,right定位,并且可以通过z-index进行层次分级 absolute(绝对定位) 脱离文档流,通过top,bottom,left...

tianyawhl
2016/08/10
41
0
之css总结

(一)标准模式和怪异模式的一些不同 (1)IE对盒模型的解析 在标准模式下,页面的宽度为:width+border+padding 在怪异模式下,width就包括了padding 和border (2)在怪异模式下,如下的样式不能正常...

sunshinewyf
2015/09/19
95
0
深入理解CSS中的层叠上下文和层叠顺序

深入理解CSS中的层叠上下文和层叠顺序 上下文 前端大全 · 2016-01-20 20:12 (点击上方公众号,可快速关注) 作者:张鑫旭 网址:http://www.zhangxinxu.com/wordpress/2016/01/understand-cs...

LorinLuo
2016/03/03
51
0
div层调整z-index属性无效原因分析及解决方法

这是在学习css中遇到的一个问题。 div层调整zindex属性在IE中无效原因分析及解决方法 在CSS中,只能通过代码改变层级,这个属性就是z-index,要让z-index起作用有个小小前提,就是元素的pos...

球球
06/12
0
0
认识CSS中的z-index元素层级属性

Z-index:指定了元素及其子元素的Z轴顺序,在Z元素发生覆盖的时候,哪个在下面,哪个在上面,一般都由Z-index来决定。Z-index的支持的属性值有:z-index:auto/整数/inherit;基本特性有:支持...

hyz000
2016/04/21
1K
0
CSS定位问题(3):相对定位,绝对定位

引子: 开始的时候我想先要解决一个问题,怎么设置一个div盒子撑满整个屏幕? 看下面的html代码: XHTML 1 2 3 4 5 <body> <div id="father-body"> <div class="item1"></div> </div> </bod......

-鹏
2016/05/04
58
0
ntv.js框架(第三章) - 机顶盒HTML和CSS编写注意事项

UI设计: 机顶盒的输出设备为电视机,电视机的图像重现率比计算机的显示器小,靠近边缘部分的文字与图像可能会在电视机中无法看到,所以在进行应用界面设计时,文字与图像尽量设计在屏幕中间...

coton_chen
2015/01/28
0
0
常见的ie6下z-index不起作用的问题及解决方法

一、概念 z-index伴随着层的概念产生的。网页中,层的概念与photoshop或是flash中层的概念是一致的。熟悉photoshop或是flash的应该知道,层级越高(图层越靠上),越在上面显示,如果层发生重...

狂沙lover
2013/03/13
0
0
前端03.css相关

一、关于css语法。 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。 selector { property: value; property: value; ... property: value h1 {color:red; font-size:14px;} 二、...

苏浩智
2017/05/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

TextView设置行间距、字体间距

一、设置行间距 1、设置行间距:android:lineSpacingExtra,取值范围:正数、负数和0,正数表示增加相应的大小,负数表示减少相应的大小,0表示无变化 2、设置行间距的倍数:android:lineSpa...

王先森oO
8分钟前
0
0
适配器模式

适配器模式(Adapter):将一个类的接口转换成客户端希望的另外一个接口,适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。 适配器用于连接两种不同种类的对象,使其毫...

阿元
8分钟前
0
0
CoreText进阶(四)-文字行数限制和显示更多

CoreText进阶(四)-文字行数限制和显示更多 用例和效果 Demo:CoreTextDemo 效果图: 默认的截断标识和自定义的截断标识符效果图  点击查看更多之后的效果图  为了可以设置显示的行数以...

aron1992
10分钟前
0
0
nginx的五种负载算法

nginx的五种负载算法 2017年04月26日 15:01:11 阅读数:1297 1.round robin(默认) 轮询方式,依次将请求分配到各个后台服务器中,默认的负载均衡方式。 适用于后台机器性能一致的情况。 挂...

linjin200
12分钟前
0
0
Android RecyclerView快速上手

RecyclerView mainMenu = findViewById(R.id.fragmentMain); mainMenu.setLayoutManager(new GridLayoutManager(getActivity(),4)); mainMenu.setAdapter(new MainAdapter......

燕归南
14分钟前
0
0
RabbitMQ实战:理解消息通信 

应用RabbitMQ的5种队列 一、简单队列 P:消息的生产者 C:消息的消费者 红色:队列 简单队列的生产者和消费者关系一对一 但有时我们的需求,需要一个生产者,对应多个消费者,那就可以采用第...

spinachgit
15分钟前
0
0
Linux的使用技巧:到底要不要会用?[图]

Linux的使用技巧:到底要不要会用?[图] 最近有个项目接近了尾声,要进入到调试测试阶段。这是一个使用Springboot框架为后台程序,mpvue构建的小程序项目。服务器我最终仍旧选择了Linux操作系...

原创小博客
17分钟前
0
0
记elasticdump 备份数据导出导入

版本: elasticsearch 5.5.2 elasticdump 2.2 系统 CentOS7.3 因项目需求 从生产导出一份索引到测试 帮助文档 https://github.com/taskrabbit/elasticsearch-dump?utm_source=dbweekly&utm_m......

雁南飞丶
18分钟前
0
0
saltstack配置目录管理

1.服务端配置 -接着编辑之前的 top.sls 文件 #vim /srv/salt/top.sls //修改为如下 base: 'slaver.test.com': - filedir -新建 filedir.sls 文件 # vim /srv/salt/filedir.sls file-dir: fi......

硅谷课堂
18分钟前
0
0
python日期时间

日期和时间 Python内建的datetime模块提供了datetime、date和time类型。datetime类型结合了date和time,是最常使用的: In [102]: from datetime import datetime, date, timeIn [103]:...

火力全開
25分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部