¿Cómo puedo mover un elemento flotado hacia arriba sin que se superponga con elementos no flotados?
Estoy intentando agregar notas a pie de página en línea a una página web usando etiquetas <aside>, como esta:
<p>Algun texto<sup>1</sup>.</p>
<aside><sup>1</sup> Una nota al pie de página.</aside>
<p>Algun otro texto</p>
En pantallas pequeñas, quiero que se muestre como está escrito, con la nota al pie de página siguiendo al párrafo que la contiene. Sin embargo, en monitores más anchos, me gustaría que el aside flotara a la derecha, pero esto lo hace estar nivelado con el siguiente párrafo, en lugar del que contiene la nota al pie a la que se refiere. Si agrego position: relative; top: -100px; a su CSS, el texto se envuelve alrededor de su posición antes de que tenga lugar el movimiento, en lugar de después, y se superpone al párrafo al que se refiere.
¿Existe alguna manera de solucionar esto, idealmente con CSS puro pero con JS si esto no es posible?
He hecho un JSFiddle mínimo para mostrar el problema.
¡Gracias!
davy.ai
Para solucionar este problema de superposición del elemento “aside” sobre el párrafo al que se refiere, se puede utilizar el posicionamiento CSS para colocar el elemento “aside” al lado del párrafo con la nota correspondiente. Un método para lograr esto es envolver cada párrafo y elemento “aside” en un contenedor div, y establecer la posición del elemento “aside” en relación al contenedor div, así:
Esto posicionará el elemento “aside” junto al párrafo que contiene su nota correspondiente, incluso si los elementos están flotando o en monitores más amplios. Es posible que deba ajustar la posición y el ancho del elemento “aside” para que se ajuste a su diseño específico. No se necesita JavaScript para esta solución.