网页Div层重叠+在宽屏中居中(FF不能居中)
有時候給網頁佈局會出現層與層之間的重疊問題,解決了又不能在寬屏顯示器居中,爲了兩者兼得的方法~利用position屬性可以解決!
效果圖:
![](https://i-blog.csdnimg.cn/blog_migrate/2b4c07203e72da647c0158a77e004b83.jpeg)
<HTML>
<HEAD>
<TITLE>main</TITLE>
<METfA HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
</HEAD>
<style>
*{text-align:center;margin:0;}
#div_main
{
width:1000px;
height:100%;
position:relative; top:0px; left:0px;
}
#top_bg
{
background-image:url(images/main_01.jpg);
height:109px;
}
#apDiv1
{
background-image:url(images/toolbar.gif);
background-repeat:no-repeat;
width:235px;
height:951px;
position:absolute;left:0;top:0;
}
</style>
<BODY>
<!-- ImageReady Slices (main.psd)
-->
<div id="div_main">
<div style="position:absolute;left:0;top:0;">
<TABLE WIDTH=1000 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD id="top_bg"> </TD>
</TR>
<TR>
<TD valign="top" style="background-image:url(images/background.gif);">
<div><div style="background:url(images/main_04.jpg); width:720px; height:1827px; margin-left:260px;"></div>
</div>
</TD>
</TR>
<TR>
<TD>
<IMG SRC="images/main_03.jpg" WIDTH=1000 HEIGHT=110 ALT=""></TD>
</TR>
</TABLE>
</div>
<div id="apDiv1"></div>
</div>
<!-- End ImageReady Slices -->
</BODY>
</HTML>