css - 将 div 浮动在（绝对定位？）背景 div（或图像）上

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>