武林網(www.49028c.com)文章簡介：CSS制作網頁導航:兩側背景自動延伸.

方法來源于土豆網的導航，在這里紀錄一下實現的思路。

主要是利用 position 屬性的 absolute 和 relative 配合 z-index 來實現的，通過position:absolute將需要平鋪的背景層疊在另一背景上，這樣即可以實現同一位置的兩個背景，再使用z-index將內容提升到最高階顯示。

<div id=”a”>
<div id=”b”>
<ul>
<li><a href=””>互聯網談</a></li>
<li><a href=””>交互設計</a></li>
<li><a href=””>技術言論</a></li>
</ul>
<div id=”c”></div>
</div>
<div id=”d”></div>
</div>

首先將其中一個背景樣式寫在<div id=”a”>上，然后是將另一個背景樣式寫在<div id=”d”>上，<div id=”b”>為內容層，<div id=”c”>是另一個背景樣式層，可以自由的出現在<div id=”b”>里面的任何一個位置。如土豆網中間的那個有弧線的背景。

然后是樣式方面：

#a {background:#f00; height:50px; position:relative; width:100%;}
#b {height:50px; margin:0 auto; position:relative; width:950px; z-index:9000;}
#c {background:#ff0; height:50px; position:absolute; left:100px; top:0; width:100px; z-index:-1;}
#d {background:#f60; height:50px; position:absolute; left:0; top:0; width:50%; z-index:1;}
ul {line-height:50px; position:relative; z-index:9001;}

具體代碼參見：

[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]