Why HTML draggable element drags with parent background?

Question

I have a draggable DIV without background inside DIV container with background:

<div style="width: 200px; height: 200px; background: red">
  <div style="width: 100px; height: 100px; border: 1px solid black" draggable="true">
    div without background
  </div>
</div>

When I drag the inner DIV, for some reason it moves with the parent background. Is it possible to drag the inner DIV with transparent background?

Answer 1

It seems for some reason draggable="true" forces the div to inherit the parent background attribute. One fix is to use position on the <div> with z-index. Not sure if there is another way to fix, but here is a working snippet:

[draggable="true"] {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  position: relative;
  z-index: 1;
}

<div style="width: 200px; height: 200px; background: red;">
  <div style="width: 100px; height: 100px; border: 1px solid black;" draggable="true">
    div without background
  </div>
</div>

Answer 2

you can add css style to your draggable element it will remove parent background:

transform: translate(0, 0);