如何實現與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;}