png图片浮在文字上方用div+css怎样实现
发布网友
发布时间：2022-04-06 11:27
共5个回答
热心网友
时间：2022-04-06 12:56
正确的方法是：图片的父及元素相对定位 + 图片本身绝对定位
下面例子中p就是图片的父级元素，父级元素要有相对定位属性，当然p也可以换成div或其他标签，或者图片的父级元素p上不加相对定位属性，而在p的父级上面加相对定位属性也行：
html代码：
<p class="xiangi"><img src="png图片地址" class="juei" />文字段落</p>
Css代码：
.xiangi{position:relative;}/*图片的父级或爷爷级元素相对定位*/
.juei{position:absolute;left:200;top:100px;}/*图片绝对定位，数值根据你页面自己调整*/
另外你这个东西还有个需要解决的是png在ie6下背景不会透明的问题，办法很多，自己百度下：ie6 png透明
热心网友
时间：2022-04-06 14:14
一共三个块级元素标签，post为整个文章内容区域，content默认可以只加一个最小高度（如min-width:200px），mark就是那个印章了。
主要原理就是父容器post相对定位（position:relative），印章mark绝对定位（position:absolute），然后就可以随意设置mark的top/bottom和left/right属性来进行定位了，z-index一般不用设置，因为根据文档顺序，后出现的内容会挡住前面的内容。
基本的HTML结构：
<div class="post">
<div class="content"></div>
<div class="mark"></div>
</div>
基本的样式：
<style type="text/css">
.post { position: relative; }
.content { min-width: 200px; }
.mark { position: absolute; top: 100px; right: 50px; width: 150px; height: 150px; background: url(images/mark.png) no-repeat center center;}
</style>
对于IE6的PNG透明问题的简易解决方法是在.mark类中追加
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/mark.png" ,sizingMethod="crop");
这两句，如果有问题可以继续...
热心网友
时间：2022-04-06 15:49
例子
html代码：
<p class="xiangi"><img src="png图片地址" class="juei" />文字段落</p>
Css代码：
.xiangi{position:relative;}
.juei{position:absolute;left:200;top:100px;}
热心网友
时间：2022-04-06 17:40
div {
position:absolute;
left:x;
top:y;
}
热心网友
时间：2022-04-06 19:48
