Estoy creando una aplicación de calendario de recursos/programación en reaccionar. Lo construí usando una tabla HTML. La tabla es la cuadrícula del calendario. Dentro de las celdas de la tabla, tengo divisiones de eventos que pueden ser más largas que la celda misma para representar la duración del evento. Debido a esto, los eventos desbordan la celda principal, lo que funciona bien. Sin embargo, si dos eventos se superponen en la misma fila, me gustaría que los divs se apilen incluso si los divs no están dentro de la misma celda. Aquí hay un ejemplo.

Puede ver en la imagen que los divs verde y azul se superponen, pero dado que están en 2 celdas diferentes, no se apilan, solo se superponen entre sí. Aquí hay un código de ejemplo:

 <table> <tbody> <tr> <td> <CalendarEvent style={{width: "widthOfTwoCells"}} /> </td> // This first div will overlap the 2nd // since the width is as long as 2 cells. <td> <CalendarEvent style={{width: "widthOfTwoCells"}} /> </td> <td></td> </tr> </tbody> </table>

Esto es bastante básico en comparación con lo que hay allí, pero creo que resuelve el problema. Con la esperanza de que haya una manera de solucionar esto con CSS puro o algo así sin tener que crear una fórmula en JS que verifique si están colisionando. Gracias por echar un vistazo. Aquí hay algo de CSS adicional para el div Cal Event en caso de que ayude.

 .calendar-event { position: relative; height: 40px; z-index: 90; }