Question

父div里的图片覆盖了子div如何解决

我有一个大的div d1,d1的右下角插入了一个小的div d2,我在d1里插入了一张图片 widht=100% height=100%
这时候 图片会覆盖右下角的d2 ,请问要怎么设置 才可以让d2显示在图片的上面 而不被图片覆盖?

Answer 1

一种方法，你把这张图片设置成背景图片。

第二种方法用定位布局，看下边代码：

<div class="d1" style="position:relative;">
    <img src="" width="100%" height="100%">
    <div class="d2" style="position:absolute; width:100px; height:100px; right:0px; bottom:0px"></div>
</div>

定位布局呢，首先如果父级不是body的话，在样式中要设置position:relative，然后子级设置position:absolute，这样就保证子级在上面显示，而且子级的位置需要设定，属性分别为top，left，right，bottom---上，左，右，下，right:0px; bottom:0px意思就是d2与d1的右边距为0px，下边距为0px，宽高可以自己改，我说的还不是很全面，有时间的话去百度一下css定位布局，相对定位和绝对定位，这是经常用到的，很有用。

Answer 2

你的d2设置了定位吗？d2添加属性{;z-index:1}目的是将其层级提高就可以了。

Answer 3

第一种方法：把图片设置为d1的背景，d2自然就显示在图片上面。
第二种方法，设置定位。父类d1相对定位position:relative,子类d2设置为绝对定位position:absolute。估计d2效果图调整属性分别为top，left，right，bottom---上，左，右，下对应的属性值

Answer 4

这样啊，其实你首先把整个div脱离文档流 positon:fixed; 你不应该这样做，你应该是定义盒子套盒子的格式来做，你应该把那个百分百的图片定义在你定义的那个想要放入图片的盒子里，只要调整你放入的图片的宽和高就行了，实在不行你在联系我

追问

不行啊....

Answer 5

两个DIV都设置属性position:relative; z-index:
希望显示在上面的就z-index设置大一些即可