[ how to change two div-positions on click with javascript ]

i got a webpage with some "cards" (divs) layin on it. they are positioned in a star-like order, flowing to the background.

i want to bring cards from the background to the middle-foreground bei clicking on it (to focus the card "contact" for instance).

how can i realize this? is there any script which is already containing a function like this?

Answer 1

I believe the CSS z-index property is what you want to use, but I haven't used it so I can't help much there.

Answer 2

You can use the z-index but: You should be aware though. That if a user wants to cheat he can just go in with firebug and start changing the z-indexes to change card positions.

Maybe you shouldn't have all the cards laying there, and just keep changing the top card image to the new one. instead of having all of them there from the begining. Also because having so many divs with cards it's unecessary has you will always just be able to see one or two.