2011-09-26 238 views
-1

我想擁有另一個內部,它將用作容器的背景,並位於容器內所有其他元素的後面。該HTML將類似於這樣:CSS:父元素中所有兄弟元素後面的元素

<div id='container'> 
    <div>Blah</div> 
    <input type='text'/> 
    <input type='submit'/> 
    <div id='background'> 
     <img.../> 
     Some Text Maybe? 
    </div> 
</div> 

我的失敗CSS:

#background{ 
    float:left; 
    z-index:-999; 
    background-color:black; 
    height:'+o.height+'px; 
    width:'+o.width+'px; 
} 

的0.variables是從一個jQuery插件,我正在做這個的 - 基本上是DIV應該是相同的高度和父母的寬度。

我現在所處的位置:我的背景位於兄弟元素之下(沿着y軸而不是z)。當我使用位置屬性時,它會將元素放在父元素後面或者它不起作用。

我最終試圖做的是創建一個jQuery插件,爲指定元素添加動畫背景。我甚至不確定我想用CSS來做什麼是可能的。

回答

-1

z-index不能是負數。相反,對於其他元素使用正z-索引,以便它們可以顯示在具有z-索引0的元素上。

+0

也可以。我用'z-index:-1'自己做了這樣的事情,完美無缺。 –

+0

是的,它可能是負面的。我的錯。 – Debiprasad

1

嘗試將背景作爲容器的第一個子元素,然後使用position: absolute;。使用z-index,直到它工作。

此外,您可能需要在<body>上指定一個「更負面」的z-index,否則您的背景元素將會在身體後面(因此不可見)。

+0

位置:絕對;在背景上至少要顯示它,但它現在將其他元素推到父級之外。我的目標是儘可能少地改變現有的元素。編輯:沒關係,它只將背景放在父背後。 – jreed121