JSP 頁面圖片上絕對定位文字：容器 relative + 文字 absolute

問題

JSP 循環輸出卡片，需在圖片左上角顯示「Lv」、右上角「位置」、左下角「姓名」，原代碼用 position:relative + 負 top/left 導致位置錯亂。

正確 CSS 結構

<div class="card" style="position:relative; width:139px; float:left;">
    <a href="...">
        <img src="..." style="display:block;"/>
    </a>
    <label class="lv" style="position:absolute; top:0; left:0;">Lv${pci.potentiality}</label>
    <label class="pos" style="position:absolute; top:0; right:0;">${pci.playerCard.player.position.abbreviation}</label>
    <label class="name" style="position:absolute; bottom:0; left:0;">${pci.playerCard.player.name}</label>
</div>

核心規則

• 父容器 position:relative（或 absolute/fixed）建立定位上下文；
• 子元素 position:absolute 配合 top/right/bottom/left 精準定位；
• img 設置 display:block 消除底部間隙；
• 避免在 label 上疊加 position:relative + 負邊距，極難維護。

討論截圖