Making parent's background to be on top of childrens in CSS

Question

I have the following DIV structure:

<div id="parent">
<div id="child"></div>
<div id="child2"></div>
</div>

I want to apply one half opaque background into the parent DIV, and one fully visible background to the child DIVs. However, it seems that the child will take over the parent, so, I have now no idea how to come over with this.

EDIT: Some more clarification.

I have a jQuery draggable "window" made of DIVs. Inside it, I have a progress bar with

relative position like:
position: relative;
left: 16px;
top: 16px;

This way the progress bar will be at 16-16 of the window (not the screen) and the progress bar moves correctly along with the window.

However, the progress bar has texture on the top. Take a look at this example:

<div style="background: url('texture.png'), url('empty.png'); width: 256px;">
<div style="background: url('progress.png'); width: 33%;"></div>
</div>

There's an opaque texture applied to the whole progress bar element, for example, if the percentage of this progress bar is 33%, then it looks like xxx------ where x denotes the flowing green bar and - is empty. The texture must be applied to both x and -, but currently the image of x takes place over the texture.

I can't really use Z-index and/or position absolute to position the child elem on the top, because of the relative positioned approach.

Answer 1

Since the children are divs, they will fill to the maximum width they can, which so happens to be the width of the parent. As a result, child and child2 will cover all the area the parent fills. To get some of the parent to show around the children, try setting the size of the children to something less than that of the parent, or try adding padding to the parent.

Answer 2

z-index? Try this article!

Answer 3

this is the solution for IE, the bold pieces of code are the magic ones:

<style type="text/css">

#parent { background: red; opacity: .5; filter: alpha(opacity=50); width: 100px; height: 100px }
#child1, #child2 { margin: 10px; position: relative }
#child1 { background: blue }
#child2 { background: green }

</style>

<div id="parent">
<div id="child">lorem
<div id="child2">ipsum
</div>

To be cross-browser I would suggest using an alpha PNG in the parent's background, making life much easier.

Answer 4

I don't know whether I understoood your question correctly, but aren't you looking for CSS3 RGBA colours?

p { color: rgba(0,0,255,0.5) }        /* semi-transparent solid blue */
p { color: rgba(100%, 50%, 0%, 0.1) } /* very transparent solid orange */

Reference: 4.2.2 RGBA color values

Answer 5

Here is the progress bar code I use:

To change the percentage, just change the cover class' postiion (e.g. left:80%) and of course the text percentage both of which are in the HTML. Also, it uses a semi-transparent png for the bar image, so you can change the bar background color #888888 in this case to match whatever color you desire.

Note: the files are hosted on tinypic and it's been a little slow for me lately, so give it a few extra seconds to see the images.

CSS

.wrapper {
 background: transparent url(http://i50.tinypic.com/2a65xtf.png) no-repeat scroll 0pt 0pt;
 width: 216px;
 height: 25px;
 position: relative;
}
.bar {
 background: #888888 url(http://i49.tinypic.com/2cdzyj9.png) repeat scroll center center;
 overflow: hidden;
 position: absolute;
 display: block;
 width: 200px;
 height: 15px;
 top: 6px;
 left: 8px;
 text-indent: -30px;
}
.cover {
 background: transparent url(http://i47.tinypic.com/zyfq61.png) repeat-x scroll 0pt 0pt;
 position: absolute;
 display: block;
 width: 200px;
 height: 15px;
 top: 0px;
}
.bartext {
 position: absolute;
 display: block;
 top: -0.2em;
 font-size: 12pt;
 font-weight: bold;
 color: #ffffff;
}

HTML

<div class="wrapper">
 <span class="bar">
  <em class="cover" style="left:50%">
   <span class="bartext">50%</span>
  </em>
 </span>
</div>