要素の重なり順を制御する

●問題
css2.1で自由に色を変えることができる角丸のボックスを実現するため、
四角を角丸でくりぬいたような透過画像を、position:absolute; bottom:0;でbox内下よせで配置したら、
画像がテキストにかぶさってしまい、リンクや選択ができなくなった。

●解決法
imgをテキストより先に記述すれば、
</body>に近い記述が、重なり順の上になるので、テキストをクリックできる。
しかし、その場合は一部のブラウザでテキストの上側に余計な余白が表示されてしまう。

そこで、cssでz-indexを指定すれば問題なく解決できる。
z-indexは要素の重なり順を制御するプロパティで、
position:static以外を指定した要素に有効である。
img {z-index:2}　のように指定し、数字が大きい方の重なり順が上になる。
IE6等のブラウザでも問題なく使う事が出来る。

●その他
角丸はCSS3で正式に実装されるが、
対応ブラウザのシェアの関係上、仕事で使うのは当分無理。