Html 如何用CSS实现这个UI

我正在开发Wordpress模板，遇到了一个小问题： 我无法将日期标签定位在图像缩略图上方，您可以在此处看到：

如果我让它的位置：绝对它的位置将改变，而窗口正在改变

我如何实现正确的CSS呢

这是代码笔示例，请尝试调整窗口大小：

`http://codepen.io/msabdullah/pen/rplgC`

---

您需要结合使用

位置：相对
和
左
右
顶部
底部
来正确定位它。它应该相对于父元素进行定位

<div class="parent">
  <div class="child">
  </div>
<div>

这只是一个例子，但应该是类似的。
尝试给父元素提供相对的位置，以保持一致性。
检查

CSS是这样的：其中div是父元素have
位置：relative

img, p{display:inline-block;}
div{position:relative;}
p{position:absolute; right:0; top:0;}

对父元素使用
position:relative
。这样地。不要使用技巧“绕过”质量过滤器。他们来这里是有原因的。
img, p{display:inline-block;}
div{position:relative;}
p{position:absolute; right:0; top:0;}