作者cgcat (小绵羊赶集)
看板Web_Design
标题[问题] position的问题
时间Fri May 12 17:32:41 2017
想请问各位高手
我目前想做一个效果类似下面的图片
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://webptt.com/cn.aspx?n=bbs/Web_Design/M.1494581565.A.6F5.html
1F：→ miau: top可以使用百分比%为单位 05/12 17:45
2F：→ steven11329: 图片用背景的方式也可以。 05/12 20:18
3F：→ jherk: flex 05/13 20:06