我在另一个网站上看到了这个在他们的css中，我有一个问题
<span></span> Inside <a></a> tags
和
.slikaPosla span
{
display: block;
position: absolute;
bottom: 0;
{
span上的文本在图像的底部
下面是完整的代码:
<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>
My SITE their
我试着切换位置到任何弹出当我写，但没有工作
p。S:我正在使用Bootstrap，这是所有课程都不在的原因风格
您的.slikaPosla span是绝对定位的，因此它的位置相对于最近的非静态元素。但是你的.slikaPosla是静态定位的(默认的position值)。
将position: relative;加入.slikaPosla规则。在他们的网站上，这很可能是因为在其他地方设置了该规则。
.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;
}