Question

Say I have a html object tree as follows:

<div>
    <p>Text 1</p>
    <p>Text 2</p>
    <div></div>
</div>

I want the css to flood the inner div inside of the outer one. However I want the text etc to appear intact. My idea is I can set a bg color and opacity to the inner div and not affect the text. How do I do this?

EDIT: just to emphasize on my point:
I could very well set the opacity on the outer div, but the text inside will also fade. I don’t want this to happen

Answer 1

You could set the outer div to position: relative then the inner div to:

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

And set whatever you want on it. It should now cover everything inside that first div. If you want the text to appear on top of it just set:

div p {
   position: relative;
   z-index: 1;
}

div div {
   z-index: 0;
}