Help One div box on top of another (Resolved)

[Quark]

So I know you can put div boxes within div boxes, but is there a way to have one behind another?
What I'm trying to do is:
I have a div box with an image background, then I have made a textbox using "div", but set the opacity to 0.5. After that I want to insert in a new div box to overlay on top of the textbox to set the opacity of the text to 1.

And I guess in general it'd be nice to know...

 

[IctoraPost]

If I'm interperating you right, is something like this what you want?

.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius metus ut nisl congue lacinia. Sed ac velit posuere, tincidunt ex at, iaculis leo. In accumsan risus id ipsum placerat interdum quis a ipsum.

This is an absolutely positioned background which lets the things below it (code-wise) go on top of it (presentation-wise). You can find out more about positioning here.

However, there's an easier way to do this.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius metus ut nisl congue lacinia. Sed ac velit posuere, tincidunt ex at, iaculis leo. In accumsan risus id ipsum placerat interdum quis a ipsum.

This one has an opaque background on the outer div, then a semi-transparent background on the inner one using rgba. The inner div covers the whole outer div. This way, you can have different colored transparencies and change the size of your cover, like so.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius metus ut nisl congue lacinia. Sed ac velit posuere, tincidunt ex at, iaculis leo. In accumsan risus id ipsum placerat interdum quis a ipsum.

Spoiler: Code

[div=position: relative; max-width: 400px; height: 300px;][div=width: 100%; height: 100%; background: url('https://cdn.pixabay.com/photo/2015/10/05/15/37/forest-972792_960_720.jpg'); position: absolute; top: 0; left: 0; color: transparent; opacity: 0.5;].[/div][div=position: relative; width: 300px; margin: 0 auto; top: 50px; color: black;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius metus ut nisl congue lacinia. Sed ac velit posuere, tincidunt ex at, iaculis leo. In accumsan risus id ipsum placerat interdum quis a ipsum.[/div][/div]

[div=position: relative; max-width: 400px; height: 300px; background: url('https://cdn.pixabay.com/photo/2015/10/05/15/37/forest-972792_960_720.jpg');][div=width: 100%; height: 100%; margin: 0 auto; box-sizing: border-box; padding: 50px; background: rgba(255,255,255,0.7); color: black;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius metus ut nisl congue lacinia. Sed ac velit posuere, tincidunt ex at, iaculis leo. In accumsan risus id ipsum placerat interdum quis a ipsum.[/div][/div]

[div=position: relative; max-width: 400px; height: 300px; background: url('https://cdn.pixabay.com/photo/2015/10/05/15/37/forest-972792_960_720.jpg');  box-sizing: border-box; padding: 50px;][div=padding: 10px; background: rgba(255,255,255,0.7); border-radius: 5px; color: black;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius metus ut nisl congue lacinia. Sed ac velit posuere, tincidunt ex at, iaculis leo. In accumsan risus id ipsum placerat interdum quis a ipsum.[/div][/div]

 

[Quark]

IctoraPost

Thank you for answering! The second method definitely does seem easier so I'll be using that. Though I'll definitely practice on positioning, for other types of implementations in the future.