Draggable zIndex issues

[jan57]

Hi, I am a complete newbie, apologies for any mishaps. 

Trying out the Draggable plug in, i could not replicate other examples where the dragged item gains top position compared to the others on screen.

I do not know what i'm doing wrong, i suspect it is a very simple issue that keeps eluding me.  

Thank you in advance.  

See the Pen PoaLryY by Jan57 (@Jan57) on CodePen.

[Cassie]

Hey there!

 

Yep, nice and simple, but a little confusing! A little CSS 'gotcha' in play here.
 

Quote

Z Index ( z-index ) is a CSS property that defines the order of overlapping HTML elements. Elements with a higher index will be placed on top of elements with a lower index. Note: Z index only works on positioned elements ( position:absolute , position:relative , or position:fixed )

 

You don't have a position applied to your elements. If you add a position you'll get the result you're after.

position:relative added in the below pen...

See the Pen bGKJbMm by GreenSock (@GreenSock) on CodePen.

[jan57]

Awesome, Cassie, thank you very much. I will brush up on my CSS.

Much appreciated!