html如何将一个div置于最上层_随笔

1、新建一个html文件，命名为test.html，用于讲解html如何将一个div置于最上层。

2、在test.html文件内，使用div标签创建两个模块，并分别设置它们的id为testone，testtwo。

3、在css标签内，统一设置div的样式，定义它们的位置属性为绝对定位，宽度和高度为300px。

4、在css标签内，设置id为testone的样式，定义其背景颜色为红色，同时使用z-index属性定义其为最上层。

5、在css标签内，设置id为testtwo的样式，定义其背景颜色为蓝色，距离左边和距离上边的位置为20px。

6、在浏览器打开test.html文件，查看实现的效果。

这个问题已经回答过，如下所示

设置style 中 z-index:auto

auto可定义为一个值(整数数字)，越大代表越置前，如可定义为： z-index:999。

若定义为-1，代表为最底层。

div的图层由div的style中的z-index来决定，z-index是层垂直屏幕的坐标，0最小，越大的话位置越靠上。

·测试效果：

<!DOCTYPE html>

<html>

<head>

<title>div图层样式</title>

<style>

.div-relative{position:relative color:#000 border:1px solid #000 width:500px height:400px}

.div-a{ position:absolute left:30px top:30px background:#F00 width:200px height:100px}

/* css注释说明：背景为红色 */

.div-b{ position:absolute left:50px top:60px background:#FF0 width:400px height:200px}

/* 背景为黄色 */

.div-c{ position:absolute left:80px top:80px background:#00F width:300px height:300px}

/* DIV背景颜色为蓝色 */

</style>

</head>

<body>

<div class="div-a">我背景为红色</div>

<div class="div-b">我背景为黄色</div>

<div class="div-c">我背景为蓝色</div>

</div>

</body>

</html>

2、页面中实现的效果如下：

参考链接：http://zhidao.baidu.com/link?url=kaWsoXNvRO3wHgX2Opxuywn2eZWqiMdWtb7AhtNZLsRYhVjdDW3ceFUl0KshDdnrfEbLl33KaEkcnO94jhaRfaoatRcTS4lz3zABstaeenG

欢迎分享，转载请注明来源：内存溢出

html如何将一个div置于最上层