How to show absolute item but be able to click under it?

Sorry, I did not find anything that can help me, so I decided to ask.

What I want to do is pretty straightforward.

I want to have an absolute element (div, icon, etc..) on another div or element. I want to display the absolute element, but when it gets clicked the item under it gets the click, not the absolute item.

So let’s just say I have form input, and I want to have an icon in it with position absolute. When the icon gets the click, I want the form to be focused.

For some reason, I cannot use the label and for in this case.

Please guide me to achieve this. Thank you in advance.

Answer

You use css pointer-events for this:

.absolute-item {
  position: absolute;
  pointer-events: none;
}