让凌驾于所有层的提示居中的一种CSS做法

有时我们在编辑页面的时候，需要让某些图片或者文字凌驾于所有页面之上：

<html>
<head>
</head>
<body>
<div class="Tips"><a class="TipsFont"></a></div>
<div>other</div>
</body>
</html>

单纯用以下代码：

.Tips{
z-index:100;
position:absolute;
top:100px;
left:60px;
}

的确可以让Tips层凌驾于所有层之上，但是这样做有个很大的缺点，这样做会让Tips层无论如何都会跟浏览器边缘相差固定距离。对于不同的显示器，距离不一样，排版就肯定不一样了！所以此方法并不可取。
以下介绍我自己用的办法:

.Tips{
height:20px;
margin-bottom:-20px;
text-align:center;
}
.TipsFont{
z-index:100;
position:relative;
top:120px
}

这种方法把Tip层隐藏了，然后把Tips层内的文字通过相对定为拉出来，这样做的话，可以设置Tips的文字居中属性，这样文字就居中了，是不是很方便？
ps.以上是笔者的愚见，或许有更好的方法，欢迎转载，转载请注明：作者小JOE 地址：http://xiebiji.com/2008/10/css

RSS Feed for this Entry.