[問題] position的問題

[cgcat (小綿羊趕集)]

想請問各位高手

我目前想做一個效果類似下面的圖片

http://imgur.com/a/3Ur66

就是圖片上面有一個白色底色的文字區塊

我的想法是利用position去做

.a{position:relative;}
.b{position:absolute;}
.c{position:absolute; background:#000; padding:20px; z-index:10; color:#fff; top:100px;}




<div class="a">
        <img src="img/01.jpg" width="50%" class="b" />
        <div class="c">123</div>
</div>

但這樣就會產生一個問題是

當我要去做rwd的需求,底下的圖片是縮小了,但上面的文字區塊會一直是
絕對高度100px

想問如果我要做這樣的效果,我應該怎麼去coding呢?

謝謝了

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 210.242.160.66
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1494581565.A.6F5.html
→ miau: top可以使用百分比%為單位
→ steven11329: 圖片用背景的方式也可以。
→ jherk: flex