My span it won't stay contained in <a></a> that has a background image-CodePudding

So I saw this on another site and looked inside their css, I have a problem where I have a

<span></span> Inside <a></a> tags

and they put

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

on the span and for them text is at the bottom of the image

Here is the full code:

<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/[email protected]/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 >
        <div >
            <a href="#"  style="background-image: url('/ELEKTRICAR.jpg');">
                <span >Elektricar</span>
            </a>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL jjXkk Q2h455rYXK/7HAuoJl 0I4"
        crossorigin="anonymous"></script>
</body>
</html>

My SITE Theirs

I tried switching Positions to any that pops up when I write, but nothing works

P.S: I am using Bootstrap, the reason for all the classes that are not in Style

CodePudding user response：

Your .slikaPosla span is absolutely positioned, so its position is relative to closest non-static element. But your .slikaPosla is statically positioned (default position value).

Add position: relative; into .slikaPosla rules. In their site it works most likely because somewhere else this rule is set.

So in the end your CSS should be:

        .slikaPosla {
            position: relative;
            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;
        }