透過 CSS position absolute 來實現巢狀連結

2024-07-02 20:40 CSS

需求與限制

以本部落格為例——我希望使用者點擊每一個在首頁的「帶圖卡片」與「文字卡片」元件可以連結到特定文章，而點擊卡片元件中的「標籤」則會連結到「包含該標籤的文章一覽」頁（在本篇筆記發布前，「帶圖卡片」與「文字卡片」只有標題是連結，點擊其他部位是不會有反應的）。

但根據規格，巢狀連結是不合法的（Nested links are illegal）：

Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.

實現方式

然而透過 position: absolute 與一點點的 HTML 結構調整，我們就能實現巢狀連結。以下是一個非常簡略的範例：

<div class="wrapper">
  <a class="link_out" href="..." target="_blank"></a>
  <div>文章日期</div>
  <p>文章標題</p>
  <div>
    <a class="link_in" href="..." target="_blank">文章標籤 1</a>
    <a class="link_in" href="..." target="_blank">文章標籤 2</a>
  </div>
</div>
.wrapper {
  position: relative;
}

.link_out {
  position: absolute;
  inset: 0;
}

.link_in {
  position: relative;
}

原理如下：

  1. 整個元件 .wrapper 設定為 position: relative 來成為 .link_out 的定位點
  2. .link_out 透過 position: absolute 加上 inset: 0 來覆蓋整個元件，當游標移動到元件 .wrapper 上時，使用者點擊的是 .link_out
  3. 而 .link_in 透過 position: relative 來建立新的圖層（stacking context），於是使用者也能順利點擊到文章標籤

就是這麼簡單 🪄

See the Pen nested link by CSS position: absolute by Charlie (@Charlie7779) on CodePen.

參考文件