多段リンクの実装

とあるところで、１つのリンクの上にさらにリンクを重ねる必要が生じたので、いろいろと調べつつ簡単に組んでみました。
HTMLの構造は以下のサンプルのソースを見るとわかりますが
＜バックグラウンド＞
　　＜リンク１＞
　　＜リンク２＞
となっていて、リンクはブロックリンクにしてあります。
リンク２をリンク１の上に重ねる様に表示するために、CSSでバックグラウンドをposition:relative;、リンク２をposition:absolute;にして配置はtopとrightで調整しています。
こうすることで、リンク２の位置はバックグラウンドの左上が基準となるので、リンク１とは関係なく配置できます。

サンプル

バックグラウンド
リンク１リンク２

メインはリンク１で、リンク１内のリンク２を押したい場合はそこにマウスを合わせるとリンク１は無効になってリンク２を押せる、といったものになっています。

他にもっといい方法があるかもしれませんが、ブログのデザインテンプレをカスタマイズする際などにご利用ください。