我是编程新手，我想做一个网站，我想把一个文本放在图像的左下角.如何将它放在那里，以及当屏幕调整大小时如何让它保持在那里.我的代码没问题吧？或者我应该做些改变？ JSFIDDLE个
.flex{
position: relative;
display: flex;
justify-content: space-evenly;
}
.container-one a{
position: relative;
}
img{
display: block;
width: 100%;
height: 100%;
}
.box-one{
position: absolute;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
height: 100%;
width: 100%;
bottom: 0px;
left: 0px;
right: 0px;
top: 0px;
opacity: 0;
transition: 0.5s ease;
}
.container-one:hover .box-one {
opacity: 1;
}
span{
text-decoration: none;
color: red;
float:
}<div class="flex">
<div class="container-one">
<a href="#dog">
<img src="https://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/256x256/dog.png">
<div class="box-one">
<span>dog</span>
</div>
</a>
</div>
<div class="container-two">
</div>
</div>