current

I have the black div first, then I have the purple div, lastly I have the image as a child of the purple div

I'm trying to get the black div to be above the part of the image that's overlayed on it so it can look like this:

what I want it to look like

how do I do this?

CodePudding user response：

I think you need to check this, there is a "z-index" which is responsible for what will be shown first

https://www.tutorialspoint.com/css/css_layers.htm

CodePudding user response：

you can ::before CSS Pseudo-element for balck box and put it on top of div using absoluted div.

position: absolute;
left: 0;
top: 0;
z-index: 9;
width: 100%;
height: 100px;