I am encountering an issue with the following DIV structure:
<div id="parent">
<div id="child"></div>
<div id="child2"></div>
</div>
My goal is to have a partially opaque background for the parent DIV and fully visible backgrounds for the child DIVs. However, it seems that the child elements are taking over the parent's styling, and I'm unsure how to resolve this.
EDIT: Further clarification.
I have created a jQuery draggable "window" composed of DIVs. Within this window, there is a progress bar with
relative positioning as follows:
position: relative;
left: 16px;
top: 16px;
This setup allows the progress bar to move appropriately along with the window. However, there is a texture applied to the top of the progress bar. Consider this example:
<div style="background: url('texture.png'), url('empty.png'); width: 256px;">
<div style="background: url('progress.png'); width: 33%;"></div>
</div>
An opaque texture covers the entire progress bar element. For instance, if the progress bar is at 33%, it should appear like xxx------ where x represents the green bar and - denotes empty space. Currently, the image for the green bar is overriding the texture, which is not the desired effect.
Due to the relative positioning approach, I am unable to use Z-index or position absolute to place the child element on top of the texture.