Z-INDEX 是层叠顺序，当你设置了POSITION: absolute的时候，这个层叠顺序才起作用。你有两个层一个是Z-INDEX: 299令一个是Z-INDEX: 300那么Z-INDEX: 300的会覆盖在上边。
2.. POSITION: absolute
这个就是绝对定位。
3. 当你设置了绝对定位以后，你必须给这个层设置它的位置，如果你不设置的话，他就会出现在浏览器给他的默认位置，而每个浏览器设置的默认位置是不同的，所以你需要给他一个确定的TOP 和 LEFT位置，在所有浏览器下就能出现在固定位置了。也就是你说的兼容了。
有两种方法：
1、在同一个CSS样式表中，使用 !important 来定义不同的值以适应Firefox和IE。
例如：
padding: 20px !important/For Firefox/
padding: 10px/For IE/
（注意这里IE6是无法识别，important 这个标记的，但它会识别padding: 20px，所以要在后面加上padding: 10px用来覆盖padding: 20px）这个方法适用于修改少量代码。
2、条件注释。（只对IE浏览器有效）这也是北极冰仔部落格目前使用的方法。先为不同浏览器书写各自的CSS样式，再在head中加入以下的代码以适应不同的IE浏览器版本调用：
注意：
gt: greater than （高于）
lte: less than or equal to （低于或等于）
另外：IE还支持一个非标准的标签：comment
This is not Internet Explorer.
This is Internet Explorer.
IE会自动把此标签中的内容当作注释处理掉。
扩展资料
关于css兼容性问题及一些常见问题
目前主流浏览器的兼容性做的都比较好了，以下主要针对IE6，7的不兼容问题进行解决。
1、有浮动存在时，计算一定要精确，不要让内容的宽高超出我们所设置的宽高，IE6下，内容会撑开设置好的高度。
解决方法：给对应的父级加overflow:hidden但是会有部分被隐藏掉，最好是精确计算宽高再设定。
2、在IE6下有元素浮动时，如果宽度需要由内容撑开，就给里边的块元素都加浮动，正常浏览器不用加浮动。
3、在IE6下元素的高度的小于19px的时候，会被当做19px来处理。
解决办法：添加overflow:hidden
添加一个兼容webkit的样式，即可支持极速模式，方法如下：
html {filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)-webkit-filter: grayscale(100%)}
