I have a table and want to have a message box appear when users click on specific cells. I want the message boxes to overlay the table but be visually connected to the specific cell which was clicked. For example, I might style then like speech bubbles and position them so they appear to be joined to the clicked cell.
Usually, I would accomplish this by placing the message box inside of the cell, positioning the cell relatively and the message box absolutely. This would anchor the message box to the cell, allowing me to position it relatively to it, whilst also taking it out of the flow of the table so that its width and height did not distort its parent cell.
Unfortunately, I discovered that absolutely positioned elements are not supported in table cells and that position:relative is not defined when applied to table cells. Therefore, how can I:
- Position the message box relatively to its parent cell.
- Take the message box out of the flow of the cell.
I know I can accomplish 1 by simply using position:relative on the message box. But then how do I accomplish 2?