JSP 頁面文字定位圖片上：CSS 相對/絕對定位容器與標簽配合

問題

JSP 循環輸出卡片，需將「Lv」、位置、姓名分別定位在圖片左上、右上、左下。

核心技巧

• 外層容器 position: relative 建立定位基準。
• 內部 <label> 設置 position: absolute + top/right/bottom/left 精確放置。
• 圖片本身保持 position: relative 或默認 static，不干擾內部絕對定位。

修正後 HTML 結構

<div style="width: 139px; white-space: nowrap; float: left; position: relative;">
    <a href="...">
        <img style="border:2px solid white;" src="..." alt="">
    </a>
    <!-- 左下：姓名 -->
    <label style="position: absolute; bottom: 0; left: 0; font-weight: bold;">
        ${pci.playerCard.player.name}
    </label>
    <!-- 右上：位置 -->
    <label style="position: absolute; top: 0; right: 0; font-weight: bold;">
        ${pci.playerCard.player.position.abbreviation}
    </label>
    <!-- 左上：Lv -->
    <label style="position: absolute; top: 0; left: 0; font-weight: bold;">
        Lv ${pci.potentiality}
    </label>
</div>

關鍵點

• 容器 position: relative 是前提。
• 使用 top:0; left:0 等邊距屬性而非負 margin，穩健不隨字體大小漂移。
• white-space: nowrap 防止文字換行破壞佈局。