如何实现与CSS

Question

我正在WordPress模板此UI，并得到了这个小问题，就是： 我不能定位图像缩略图上方的日期标签，你可以在这里看到：

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

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

我该如何实现正确的CSS。

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

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

Answer 1

您需要使用的position: relative和leftrighttopbottom相结合的正确定位。它应该相对于父元素进行定位。

<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;}