Jump to content
Search Community

Draggable zIndex issues

jan57 test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

Hey there!


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


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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...