CDK drag and drop - z-order, dragged element (div) "goes under" another and is not draggable anymore

[antimagnes]

Bug, feature request, or proposal:

I try to implement a timeline using angular. I have a div with fxLayout column. Inside this div i have the timeline divs, and inside those with position: absolute the events, which are also divs. If I make the event divs draggable using cdkDrag and drag them, anything dragged from an upper timeline div will go under the timelines below (e.g. if I drag an event from the second line it goes under timeline 3, 4, 5 etc, but not 1 and 2). I tried to mess around with the z-index but to no avail.

What is the expected behavior?

The dragged element drags over the other elements

What is the current behavior?

The dragged element goes under other elements.

On the official docs site (this is what I mean https://beta-angular-material-io.firebaseapp.com/cdk/drag-drop/overview) I also noticed that if I drag the rectangle from "Basic Drag&Drop" over the "View source" and "Edit in StackBlitz" buttons of the "Basic Drag&Drop" box, than those are covered, but if I drag further down the site e.g. to the box "Drag&Drop sorting" the two button are over the rectangle.

What are the steps to reproduce?

see in current behvaiour

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

7.0.0-rc.1

Is there anything else we should know?

[crisbeto]

The CDK only moves the element around using a transform. It won't add a z-index since we'd have to make some assumptions about how much the z-index is supposed to be. Usually it's up to you to do the styling in order for it to fit within your layout.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}