如何改进定位代码？

Question

以下是我在图像上定位文字的代码。要求是：

1. 图像应自动适应屏幕。即使在智能手机上，也应该完全显示图像。仅允许显示部分图像。
2. 文本应准确定位在我希望的任何地方。

.txtimg{
  position: relative;
  overflow: auto;
  color: #fff;
  border-radius: 5px;
}

.txtimg img{
  max-width: 100%;
  height: auto;
}

.bl, .tl, .br,
.tr{
  margin: 0.5em;
  position: absolute;
}

.bl{
  bottom: 0px;
  left: 0px;
}
.tl{
  top: 0px;
  left: 0px;
}
.br{
  bottom: 0px;
  right: 0px;
}
.tr{
  top: 0px;
  right: 0px;
}

<div class="txtimg">
  
  <img src="http://vpnhotlist.com/wp-content/uploads/2014/03/image.jpg">
  
  <p class="bl">(text to appear at the bottom left of the image)</p>
  <p class="tr"> (text to appear at the top right of the image)</p>

</div>

但是，左下方的文字会在我的 firefox 浏览器中完全显示。

通过单击下面的Run Code Snippet，代码段在 stackoverflow 中运行得很好。

我不知道为什么。我找到解决方案的任何地方：将overflow:auto更改为overflow:visible。问题就会消失。

有人建议吗？

Answer 1

我无法在此特定代码上重现问题，但我知道问题所在。只需在图像上添加垂直对齐。

.txtimg img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}

这也是这样的：

.txtimg img {
max-width: 100%;
height: auto;
display: inline-block;
}

Answer 2

最后我发现了问题。在另一个CSS课程中，我已经包含了＆＃34;溢出：隐藏＆＃34;线。因此，我删除了课程txtimg中的相应行。