Hi,
I have css grid and I want to layer my logo above this grid. Not in the grid not as part of the grid. But above the grid in a fixed position.
20 x 20 grid of the same size and in want to position the logo above the grid in the left top corner.
I have no clue how to do this and don’t find anything useful.
Regards,
WOOPS: forgot the pen
Hey @quintendewilde!
Do you have any link to your code?
Make sure the images are on online.
I think you coded this in your local machine.
Ok I’ve updated it to work with placeholder images.
Same result.
What are you trying to do?
Sorry i can’t understand clearly.
The place holder logo should go above the 4 X 4 grid in the left upper corner.
I’m a little confused about the layout you are going for. Why can’t you just move the logo to the top of the grid (or before it)?
Also, why are you using float if you (I assume) are going to use CSS Grid?
If I remove the float all the grid elements go below each other like in the current pen.
I don’t want the placeholder to go before it I want it to go over the grid images.
Sure, but that is because you haven’t created the grid yet. Are you not going to use CSS Grid?
What do you mean by “over the images”?
Do you want it to cover up the grid images, i.e. overlay on top of the images? I mean, then you can’t seem them unless you plan to make the placeholder transparent or something.
I’m still not sure I get it.
I did it now like I want it but this is indeed not css grid.
Is this because I use a JS masonry script to create the grid.
But the result is what I want but then in correct coding (how can I lose the float and make the correct grid)
If you are going to use a library you have to use whatever API it gives you for creating the layout.
Making an image grid using CSS grid is pretty easy, but it won’t be a masonic layout unless you manually tweak it.
I’m still not 100% sure what you are going for here. Should the placeholder image only overlay the first grid image?