How to allow highlighting of HTML text when covered by transparent div?-CodePudding

I have a React application in which I have a transparent div covering text. The transparent div acts as a dropzone for draggable elements. There are also some children elements that may contain some text.

<Dropzone>
  <SomeChild>
    ...
    <p>some text</p>
    ...
  </SomeChild>
</Dropzone>

Because the Dropzone element is covering all of its children, the user is unable to highlight any text that may appear in the children elements.

The seemingly accepted solution to this is to add a CSS property, pointer-events, to the Dropzone element.

.dropzone {
  pointer-events: none;
}

However, this has the undesired consequence of disabling the draggable features, which is the whole point of the Dropzone element in the first place.

Is there another solution to allowing highlighting of children elements? How can I get around this restriction?

CodePudding user response：

You can apply isolation: isolate in the .dropzone selector, then select the <SomeChild />'s class and then target the <p> tag inside it then add z-index.

.dropzone {
  position: relative;
  isolation: isolate;
}

.someChild > p {
  position: absolute;
  z-index: 999;
}