Question

经过漫长的搜索，我无法在任何地方找到这个问题的参考。这可能意味着我错过了基本概念，但无论如何我会继续问。我正在尝试使用float:left <div>覆盖背景图片。下面是问题的简化版本（使用div代表图像以便快速再现）

<div style='position: absolute; background-color: blue; width: 500px; height: 500px'>
     BACKGROUND DIV
</div>
<div style='float: left; background-color: yellow; width: 100px; height: 100px'>
     FLOATING IMAGE
</div>

似乎绝对定位的div覆盖浮动。如何解决这个问题 - 不使用父级的background-image属性（这不是一个选项）？

Answer 1

设定位置：相对;在浮动元素上并指定一个z-index：1;到背景和z-index：2;浮动图像。

<div style='position: absolute; background-color: blue; width: 500px; height: 500px'>
 BACKGROUND DIV
</div>

<div style='position:relative; float: left; background-color: yellow; width: 100px; height: 100px; z-index:2;'>
 FLOATING IMAGE
</div>

编辑：这是一个供您参考的jsfiddle：http://jsfiddle.net/exUm7/1/

Answer 2

Div叠加不是一个好主意，除非你做游戏类的事情。如果你计划你的布局没有叠加，我认为是打击。它会让你轻松。

但如果你必须这样做。我们走了

<div style='float:left; background-color:blue; width:500px; height:500px; z-index:1'>
BACKGROUND DIV
</div>
<div style='float:left; margin-left:-500px; background-color:yellow; width:100px; height:100px; z-index:2'>
FLOATING IMAGE
</div>

在一个（绝对定位的？）背景div（或图像）上浮动一个div

2 个答案: