如何使用CSS实现此UI

Question

我正在使用Wordpress模板，并且遇到了这个小问题： 我无法将日期标签放在图片缩略图上方，如下所示：

http://cl.ly/image/3X1j3h3j0E0X

如果我将它设为 position：absolute ，当窗口改变时，它的位置会被改变。

我怎样才能为此实现正确的CSS。

这是CodePen示例，尝试调整窗口大小：

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

Answer 1

您需要结合使用position: relative和left right top bottom来正确定位。它应该相对于父元素定位。

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

如果你有上面的html结构，那么你需要确保两者都有定位，然后将孩子相对于父母定位：

.parent {
  position: relative;
}

.child {
  position: relative:
  top: 0;
  right: 0;
}

这只是一个例子，但它应该是类似的东西。

Answer 2

尝试将position relative提供给父元素以保持一致性。 检查 DEMO 。

这样的CSS：其中div是父元素有position:relative。

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