CSS: Element behind all sibling elements within a parent element_问答_开发者

CSS: Element behind all sibling elements within a parent element

开发者 https://www.devze.com 2023-04-08 00:11 出处：网络

I want to have ainside of anotherthat will serve as a background to the container and sit behind all of the other elements inside of the container.The HTML would be something like so:

相关专题：css

I want to have a inside of another that will serve as a background to the container and sit behind all of the other elements inside of the container. The HTML would be something like so:

<div id='container'>
    <div开发者_运维知识库>Blah</div>
    <input type='text'/>
    <input type='submit'/>
    <div id='background'>
        <img.../>
        Some Text Maybe?
    </div>
</div>

My failed CSS:

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

The 0.variables are from a jQuery plugin I'm making this for - basically the div should be the same height and width that the parent is.

Where I currently stand: My background sits below the sibling elements (along the y-axis not the z). When I play around with the position property, it either places the element behind the parent or it has no effect.

What I ultimately am trying to do is create a jQuery plugin that adds an animated background to a specified element. I'm not even sure if what I'm trying to do with the CSS is possible.

Try putting the background as the container's first child, then using position: absolute;. Mess around with the z-index until it works.

Also, you may need to specify a "more negative" z-index on the <body>, otherwise your background element will end up behind the body (and thus invisible).