Question

png图片浮在文字上方用div+css怎样实现

图片是png格式的一个印章，需要做在文字之上，请问用div+css怎样实现？注意：不是环绕，也不是图片做背景，而是让图片在文字之上！~

Answer 1

楼上说的绝对定位欠妥，只用绝对定位换个分辨率或者有的浏览器多个插件栏什么的，不同浏览者的浏览器窗口宽度或高度任意一个不一样，那个印章就绝对错位了。

正确的方法是：图片的父及元素相对定位 + 图片本身绝对定位

下面例子中p就是图片的父级元素，父级元素要有相对定位属性，当然p也可以换成div或其他标签，或者图片的父级元素p上不加相对定位属性，而在p的父级上面加相对定位属性也行：

html代码：
<p class="xiangdui"><img src="png图片地址" class="juedui" />文字段落</p>

Css代码：
.xiangdui{position:relative;}/*图片的父级或爷爷级元素相对定位*/
.juedui{position:absolute;left:200;top:100px;}/*图片绝对定位，数值根据你页面自己调整*/

另外你这个东西还有个需要解决的是png在ie6下背景不会透明的问题，办法很多，自己百度下：ie6 png透明

Answer 2

你应该是要用在文章页吧？对于这种内容不固定的东西建议使用position定位方式：
一共三个块级元素标签，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");
这两句，如果有问题可以继续...

Answer 3

方法是：图片的父及元素相对定位 + 图片本身绝对定位
例子
html代码：
<p class="xiangdui"><img src="png图片地址" class="juedui" />文字段落</p>
Css代码：
.xiangdui{position:relative;}
.juedui{position:absolute;left:200;top:100px;}

Answer 4

使用绝对定位，流中的块元素和内联元素均会忽略绝对定位元素。
div {
position:absolute;
left:x;
top:y;
}

Answer 5

那就用绝对定位