Eu estou tentando criar um gráfico de barras horizontais 100% empilhadas usando HTML e CSS. Eu gostaria de criar as barras usando DIVs com cores de fundo e larguras percentuais dependendo dos valores que eu quero representar graficamente. Eu também quero ter linhas de grade para marcar uma posição arbitrária ao longo do gráfico.

Na minha experiência, eu já peguei as barras para empilhar horizontalmente, atribuindo a propriedade CSSfloat: left. No entanto, eu gostaria de evitar isso, já que isso realmente parece confundir o layout de maneira confusa. Além disso, as linhas de grade não parecem funcionar muito bem quando as barras estão flutuando.

Eu acho que o posicionamento CSS deve ser capaz de lidar com isso, mas eu ainda não sei como fazer isso. Eu quero ser capaz de especificar a posição de vários elementos em relação ao canto superior esquerdo do seu contêiner. Eu me deparo com esse tipo de problema regularmente (mesmo fora deste projeto gráfico específico), então eu gostaria de um método que é:

Cross-browser (idealmente sem muitos hacks de navegador)Executa no modo QuirksTão claro / limpo quanto possível, para facilitar as personalizaçõesFeito sem JavaScript, se possível.