image overriding a div's bc image
i wanted the div's background(linear-gradient) to be shown on the image, but for some reason it ignored that and only showed the elements of the div
here's the codepen: https://codepen.io/staticoly/pen/KKJpjNp;
4 Replies
You could place the gradient-div and the image in the same container, put
position: relative on the container and position: absolute on the gradient-div.
The reason why your gradient is behind your .image-container ist, that the .image-container has position: relative, which lifts elements. If you want to move the element below with negative margins, you need to put a postion on both or none. Hint: negative margins not only move the element, but all below it, too.or you use grid to stack them on top of eachoter
I see 2 DIVs and nothing is appearing on top of the image because
.image-container, which wraps it, is the only positioned element.
The z-index property under the .gradient-div selector doesn't do anything for non-positioned elements (ref: z-index).
If I remove position: relative from .image-container I get something a little closer to what you were describing, with the button appearing on top of the image but its container's gradient appearing behind it. Unfortunately, I don't have a clue why that would happen. That button doesn't meet any of the criteria that should make it form a new stacking context.
If I understand what you wanted to do, I think the DIV containing the button should appear entirely on top of the image. For this, all I need to do is change margin-top to top and add position: relative to .gradient-div.
There's a space between .image-container and .gradient-div. This results in moving .gradient-div down a little. I can't really explain it, but I know that setting display: blockon the image is one of several ways to remove it.
I forked your pen and modified it so that it looks more or less like what I thought you wanted: https://codepen.io/VAggrippino/pen/vYbNYXr
Then, in the same pen, I did another one my way. Mine looks much better... because I used placekitten for the image 😅 The rest is subjective 😁lol ig most of the time we all just know the solutions to the problems and not why the problem is particularly caused. yours does indeed look a lot better.
thanks a whole lot for explaining everything, appreciate it!
thanks for the insight! i didn't really understand what was causing the problem. will be more careful when using positions again
that also works, yall really giving me a bunch of ways i can solve the same problem with
apreciate the it man