这个东西其实不用多说，很早以前就流行，已经用烂了。只是最近发现还有另外的一些写法，所以记录一下。主要是利用父节点的相对定位来实现浮动层的定位。
父节点
1 2 3 4 5 | .images-wrapper{ width:251px; height:330px; position:relative; } |
子节点
1 2 3 4 5 6 7 8 9 10 11 12 | .images-content{ position: absolute; z-index: 1; left: 0; bottom:0; width: 100%; color: #fff; background: rgba(0,0,0,.7); height: 54px; line-height: 54px; overflow: hidden; } |
html示例
1 2 3 4 5 | <div class="images-wrapper"> <img title="商品1" alt="商品111" src="http://weitaoc.com/wp-content/uploads/2015/01/20150108141249.png" /> <div class="images-content">1111111111</div> </div> |
转载请注明：迷路的老鼠 » css实现文字层浮在图片之上示例代码
