[問題] position的問題

作者: cgcat (小綿羊趕集)   2017-05-12 17:32:41
想請問各位高手
我目前想做一個效果類似下面的圖片
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呢?
謝謝了
作者: miau (米奧)   2017-05-12 17:45:00
top可以使用百分比%為單位
作者: steven11329 (清新柳橙)   2017-05-12 20:18:00
圖片用背景的方式也可以。
作者: jherk   2017-05-13 20:06:00
flex

Links booklink

Contact Us: admin [ a t ] ucptt.com