因为美工给的图片是有重叠效果的，所以使用了这个css样式．
z-index定义：
名称：z-index
分类：定位
简述：设置对象的层叠顺序
概述：z-index是设置对象的层叠顺序的样式。该样式只对position属性为relative或absolute的对象有效。这里的层叠顺序也可以说是对象的“上下顺序”。
它是一组css定位元素中的一元，要配合position使用．
第一次很粗糙的写法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>z-index测试</title>
<style>
#divspace{height:20px;}
#maindiv{width:970px;margin:0 auto;background:#009900;height:85px;}
#maindiv #toolbar{float:right;width:500px;height:50px;}
#logoz{
position:absolute;
left:6%;
top:1%;
z-index:1000;
height:auto;
}
#div_adv{
width:985px;
margin:0 auto;
height:220px;
background:url(test.gif);
background-repeat:no-repeat;}
</style>
</head>
<body>
<div id="divspace"></div>
<div id="logoz"><img src="logo.gif" border="0px;" /></div>
<div id="maindiv">
<div id="toolbar">工具条这里</div>
</div>
<div id="div_adv"></div>
</body>
</html>
效果图：
但是这样在宽屏下显示是有问题的．所以改进了．
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>z-index用法</title>
<style>
#zindex_div{position:absolute;z-index:100;width:100%; margin:0 auto;top:0px;}
#zindex_div #uu_logo{margin: 0 auto; width:900px;text-align: left;}
#maindiv{width:970px;margin:0 auto;background:#009900;height:85px;}
#maindiv #toolbar{float:right;width:500px;height:50px;}
#div_adv{
width:985px;
margin:0 auto;
height:220px;
background:url(test.gif);
background-repeat:no-repeat;}
</style>
</head>
<body>
<div id="zindex_div">
<div id="uu_logo"><img src="logo.gif" border="0px;" /></div>
</div>
<div id="maindiv">
<div id="toolbar">工具条这里</div>
</div>
<div id="div_adv"></div>
</body>
</html>
显示效果差不多，只是现在这样在宽屏下也能居中了．
分享到：
相关推荐
### 小结 通过上述分析，我们可以看到在AS3.0中通过`setChildIndex`方法可以方便地调整舞台上对象的显示顺序。这对于开发复杂动画或交互式应用程序时确保正确的视觉呈现非常重要。同时，结合数组操作和排序功能，...
以上三种方法都是纯CSS实现页面尖角、小三角形的有效手段，可以根据具体需求和场景选择合适的方法。它们都利用了CSS的边框和定位特性，通过巧妙的布局和颜色设置，创建出视觉上所需的形状。无论是在导航菜单、提示...
4.3 z-index空间位置 4.4 盒子的display属性 4.5 本章小结 第5章 文字与图像 …… 第6章 链接与导航 第7章 竖直排列的导航菜单 第8章 水平导航菜单 第9章 下拉菜单 第10章 表格也精彩 第11章 ...
为了解决这个问题，可以在页面底部添加一个透明的div层，设置其`z-index`高于模态对话框，但低于模态背景，以实现类似遮罩的效果，同时阻止用户通过点击背景关闭模态。 以下是一个简单的实现方法： ```html <!...
为了解决这个问题，可以在父元素上添加一个透明的绝对定位元素，用于处理点击事件，确保其`z-index`高于伪元素，如： ```css .clickable { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-...
第一部分 深入理解DOM脚本编程 第1章 遵循最佳实践... 12.6.1 z-index来救急 12.6.2 键盘控制及其他细节 12.6.3 select太大了吗 12.7 最后的细节 12.8 继续替换select的冒险 12.9 小结
第一部分 深入理解DOM脚本编程 第1章 遵循最佳实践... 12.6.1 z-index来救急 12.6.2 键盘控制及其他细节 12.6.3 select太大了吗 12.7 最后的细节 12.8 继续替换select的冒险 12.9 小结
第一部分 深入理解DOM脚本编程 第1章 遵循最佳实践... 12.6.1 z-index来救急 12.6.2 键盘控制及其他细节 12.6.3 select太大了吗 12.7 最后的细节 12.8 继续替换select的冒险 12.9 小结
4.3 z-index空间位置 4.4 盒子的display属性 4.5 本章小结 第5章 文字与图像 …… 第 6章 链接与导航 第7章 竖直排列的导航菜单 第8章 水平导航菜单 第9章 下拉菜单 第10章 表格也...
4.2.4 fixed（固定定位） 4.3 z-index空间位置 4.4 盒子的display属性 4.5 本章小结 第5章 文字与图像 …… 第6章 链接与导航 第7章 竖直排列的导航菜单 第8章 水平导航菜单 第9章 下拉菜单 第10...
- `modal`类用于定义模态窗口的背景层，通常设置为全屏固定定位，初始隐藏，具有一定的`z-index`值以确保其在其他元素之上。 - `modal-dialog`类则控制模态框的位置和大小，通常设置为相对定位，并添加适当的外边距...
z-index: length(@color); background: extract(@color, length(@color)); } ``` 5、数学函数 LESS提供了多种数学函数，如ceil（向上取整）、floor（向下取整）、percentage（转换为百分比）、round（四舍五入）...
一些特殊的CSS属性如`break-word`用于强制换行，`z-index`用于元素的层叠顺序，以及各种垂直对齐方法，虽然在某些情况下很有用，但它们可能不被所有浏览器完全支持，或者在W3C验证时带来困难。尽量使用广泛支持的...
#### 小结 本文介绍了正则表达式的基础语法及其在 Java 字符串中的应用，并详细讨论了 `String` 和 `StringBuilder` 类的特性和方法。同时，还解释了 `Object` 类的重要性以及自动装箱和拆箱的概念。这些知识点对于...
同时，`z-index`属性也是定位中不可或缺的一部分，用于控制层叠顺序，决定哪个元素在前，哪个元素在后，这对于元素的覆盖和显示非常重要。 总之，`position`属性是CSS布局的关键，理解并掌握它的用法能够帮助开发者...
查找汉字可以使用Unicode属性类\p{Han}，而查找数字或小写字母则可以使用字符集[0-9a-z]。这些操作都需要借助regexp包中的函数来实现。 总结起来，Go语言的正则表达式用法包括但不限于查找、匹配、替换操作，通过...