span在带背景图的<a>标签内无法定位，求解决办法

我看到别人的实现方式：把<span>嵌套在带背景图的<a>标签内，给span设置以下CSS就能让文本位于图片底部：

.slikaPosla span
{
display: block;
position: absolute;
bottom: 0;
{

但我照此编写代码后，span不受<a>标签约束，文本位置完全不符合预期，切换不同position属性值也没解决问题。我用了Bootstrap框架，完整代码如下：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <title>Document</title>
    <style>
        .slikaPosla {
            width: 300px;
            height: 200px;
            border-radius: 10px;
            background-size: cover;
            margin-left: 10px;
            text-decoration: none;
        }

        .slikaPosla span {
            display: block;
            position: absolute;
            bottom: 0;
            color: black;
            font-size: 25px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row mt-3">
            <a href="#" class="col-6 col-lg-3 slikaPosla" style="background-image: url('/ELEKTRICAR.jpg');">
                <span class="">Elektricar</span>
            </a>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
        crossorigin="anonymous"></script>
</body>
</html>

解决方法 #

核心问题是父级元素.slikaPosla没有设置position: relative——绝对定位的元素会默认找最近的非static定位父元素作为基准，父级默认是position: static，所以span会相对于body定位，自然不受a标签约束。

修改后的CSS代码：

.slikaPosla {
    width: 300px;
    height: 200px;
    border-radius: 10px;
    background-size: cover;
    margin-left: 10px;
    text-decoration: none;
    position: relative; /* 关键：让子元素绝对定位以它为基准 */
    overflow: hidden; /* 可选：防止span超出父元素圆角 */
}

.slikaPosla span {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0; /* 让span宽度铺满父级 */
    color: black;
    font-size: 25px;
    font-weight: bold;
    padding: 8px 12px; /* 让文本不贴边 */
    background-color: rgba(255,255,255,0.8); /* 可选：增强文本可读性 */
}

说明 #

1. 给.slikaPosla加position: relative后，span的bottom: 0就会相对于a标签底部定位；
2. 新增left: 0和right: 0让span宽度和父元素一致，避免文本只占内容宽度；
3. overflow: hidden可以让span的背景不超出父元素的圆角；
4. 额外加的padding和背景色是优化体验，可根据需求调整。

内容的提问来源于stack exchange，提问作者Stefan