CSS檔案：
#navbar{ background-image: url(../img/navbg.png); background-repeat:repeat-x; background-position: left top; height: 100px; width: 100%; position:absolute; position:fixed!important; z-index:100;}#container{ background-image: url(../img/mainbg.png); background-repeat:repeat-y; background-position: left top; height: 1800px; width: 788px; margin: 0 auto;}#leftnav{ position: fixed; height: 300px; width: 200px; top: 120px; left: 30px; background-color: green;}#foot{ height: 32px; line-height: 32px; text-align: center; text-size: 30px;}
HTML檔案：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html><head><meta charset="utf-8"><title>試試。</title><link href="../css/reset.css" type="text/css" rel="stylesheet"><link href="../css/home.css" type="text/css" rel="stylesheet"></head><body><div id="navbar"></div><div id="container"> <div id="leftnav"> </div></div><div id="foot"> © test.com, 2015</div></body></html>
1、必須明確DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> //關鍵技術0，需採用XTHML 1.0標準：//W3C//DTD XHTML 1.0 Transitional//EN</span>2、CSS中採用FIXED及Z-INDEX指標：
#navbar{
background-image: url(../img/navbg.png);
background-repeat:repeat-x;
background-position: left top;
height: 100px;
width: 100%;
position:absolute; //關鍵技術一，完全定位：absolute
position:fixed!important; //關鍵技術二，固定定位：fixed
z-index:100; //關鍵技術三，該區塊需置頂優先：z-index
}
3、總結關鍵技術點：
（1）首先應該明確必須採用DTD XHTML 1.0 Transitional//EN標準
（2）對固定的地區應該採用完全定位：position:absolute
（3）對固定的地區還要採用固定定位：position:fixed
（4）並且應對固定的地區優先置頂的等級：z-index:1000
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
