CSS绝对定位在宽屏分辨率下错位

网页兼容测试，除了做不同浏览器的兼容测试，还要观察网页在不同分辨率下的表现情况。

在页面中使用了CSS绝对定位，发现在宽屏下错位。随后测试非1024*768分辨率，都有很严重的错位情况。

最后找出了原因，CSS绝对定位是相对于紧邻最近的上级元素的位置，一开始我理解为浏览器左上角，这样在不同分辨率下就会出问题，用position:relative; 声明一下参考的固定位置就OK了。

如下面这段其中Top，Left都是指相对div.contentArea的位置。

页面Html

<div class="contentArea">
        <div id="navmenu"></div>        
        <div id="linkad"></div>
</div>

相关CSS定义

.contentArea {
        position:relative;         /*声明一个固定的位，必须*/
        width:910px; 
        overflow:hidden;
}

#linkad { 
        position:absolute;         /* 绝对定位 */
        z-index:9999;
        top:31px;
        left:0;
        width:908px; 
        height:20px;
        background:#ECE9E1;
}

说一下，分辨率兼容测试方法，由于我现在用的是标准4:3屏幕，一开始走了弯路，想找一款宽屏模拟软件。其实不用那么麻烦，只要调整显示器属性的分辨率，就是进行分辨率兼容测试了。

如果一定要用软件，可以用Firefox的Web Developer插件，这个插件可以模仿不同分辨率下的显示效果，向下兼容，也就是说只能模仿比显示低的分辨率，显示器是1024*768，只能向下显示800*600的网页状态。

不管如何，Firefox的确是调试网页好帮手，上次我就用它查看404页面的返回状态，很不错。