.guangg_l {
position:absolute;
top:100px;
left:50%; // 使 .guangg_l盒子左边框离浏览器左边50%，即此时.guangg_l盒子的左边框处在浏览器页面居中的位置
margin-left:-50px; // 使 .guangg_l盒子左移自身宽度的一半，此时.guangg_l盒子处于浏览器页面正中间
z-index:99;
width:100px;
}
关于 z-index
1、特点
(1) z-index仅能在定位元素上奏效，(例如position:absolute;)
(2) z轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
(3) z-index 设置元素的堆叠顺序，堆叠顺序越高离用户越近。
2、可能的值
(1) auto: 默认，其堆叠顺序与父元素相等。
(2) number: 设置元素的堆叠顺序。
(3) inherit: 从父元素继承 z-index 属性的值。
三种情况
A. 两个比较元素z-index属性都为负
<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:0px;
top:0px;
z-index:-2;
}
p
{
position:absolute;
left:0px;
top:50px;
z-index:-1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="/i/eg_smile.gif" />
<p>由于图像的 z-index 是 -2，p中文本的 z-index 是 -1，因此它在p中文本的后面出现。</p>
</body>
</html>
B.两个比较元素z-index属性都为正
<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:0px;
top:0px;
z-index:2;
}
p
{
position:absolute;
left:0px;
top:50px;
z-index:1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="/i/eg_smile.gif" />
<p>由于图像的 z-index 是 2，p中文本的 z-index 是 1，因此它在p中文本的前面出现。</p>
</body>
</html>
C.两个比较元素z-index属性一正一负
<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
p
{
position:absolute;
left:0px;
top:50px;
z-index:1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="/i/eg_smile.gif" />
<p>由于图像的 z-index 是 -1，p中文本的 z-index 是 1，因此它在p中文本的后面出现。</p>
</body>
</html>
从这三种情况可推知，h3的z-index属性为默认值，而该默认值大小为0。
