浮動div（絕對位置？）背景div（或圖像）

我似乎無法在漫長的搜索後找到任何地方的這個問題的參考。這可能意味着我缺少基本概念，但我會繼續前進並詢問。我試圖讓一個float:left<div>覆蓋背景圖片。問題的簡化版本，下面是（與代表快速重現圖像一個div）浮動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屬性（這不是一個選項）？

來源

2013-03-07 user2143479

設置位置：相對;在浮動元素上並分配一個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/

來源

2013-03-07 09:36:05

有趣的是，它沒有'位置：相對'沒有工作。 +1 – TheBronx 2013-03-07 09:40:21

@TheBronx是z-index需要設置位置。 – 2013-03-07 09:42:42

似乎沒有必要添加z-index，因爲最後的'div'出現在先前的那個上面。解決問題的是「相對位置」。 – TheBronx 2013-03-07 09:43:56

事業部覆蓋並不比如果你正在做遊戲之類的話等一個好主意。如果你計劃你的佈局，就像沒有重疊一樣，我認爲它是連擊的。它會讓你輕鬆。

但如果你一定需要這樣做。在這裏，我們去

<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>

來源

2013-03-07 09:45:56

浮動div（絕對位置？）背景div（或圖像）

回答

相關問題