css position不同属性relative与absolute实现叠加的效果.

css position不同属性relative与absolute实现叠加的效果,先看图。这种效果可以制作一个播放按钮叠加在图片上,也可以写一句说明文字叠加在图片上。


下面贴上代码:
[runcode]

  • 这个女孩唱的真不…

  • [/runcode]
    其实关键CSS只有以下这部分:

    <div style="position:relative;">
    <div style="width:304px; height:229px;position:absolute; left:20px; top:20px; color:#FFF; font-size:14px;">
    女孩
    </div>
    <img src="http://i22.ku6.com/20108/18/17/1285156346579/3.jpg" width="120" style="" />
    </div>

    总结:外部的div使用相对定位relative,里面的div使用绝对定位absolute。


    本文固定链接:成事博客css position不同属性relative与absolute实现叠加的效果.
    喜欢 (0)分享 (0)
    发表我的评论
    取消评论

    表情     1 + 7 = ? (必填)

    Hi,您需要填写昵称和邮箱!

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址