How can I move a floated element upwards without causing it to overlap with non-floated elements?
Question
I'm trying to add inline footnotes to a webpage using <aside> tags, like this:
<p>Some text<sup>1</sup>.</p>
<aside><sup>1</sup> A footnote.</p>
<p>Some more text</p>
On small screens, I want this to display as written, with the aside following the paragraph with the footnote in it. However, on wider monitors, I'd like the aside to float right, but this makes it level with the following paragraph, rather than the one containing the footnote it refers to. If I add position: relative; top: -100px; position: relative; top: -100px; to its CSS, the text wraps around its position before the move takes place rather than after, and it overlaps the paragraph it refers to.
Is there a way to fix this, ideally in pure CSS but with JS if this isn't possible?
I've made a minimal JSFiddle to show the problem.
Thanks!
2 answers
solution1
0 2021-11-24 00:37:23
You could use flexbox or grid. I prefer grid in this case because it allows us to easily specify the relative widths of the two columns. grid-template-columns: 2fr 1fr means that I want the first column to be twice as wide as the second column.
aside { padding: 16px; background: #999; } @media (min-width: 500px) {.paragraph-with-aside { display: grid; grid-template-columns: 2fr 1fr; grid-gap: 1em; } }
<html> <body> <div class="paragraph-with-aside"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae nisl efficitur, placerat nisi et, hendrerit purus. Proin tempor varius maximus. Morbi aliquet est et accumsan suscipit. Nunc fringilla bibendum lacus eu vestibulum. Cras sodales leo ut est faucibus rutrum. Donec sodales nisl at elit cursus vehicula. Nulla facilisi. Maecenas egestas tortor sit amet mauris faucibus iaculis<sup>1</sup>. Praesent eu vulputate orci. Nam tempor sollicitudin ante, at faucibus lorem lacinia quis. Pellentesque volutpat bibendum ligula, quis fermentum purus accumsan ac. Suspendisse ut velit ultricies, eleifend risus id, scelerisque urna. Nullam eu faucibus odio. Curabitur ac auctor lacus. Mauris vitae erat ac justo vehicula euismod.</p> <aside><sup>1</sup> Maecenas non magna id leo condimentum elementum nec quis urna. Nullam posuere erat libero, at dapibus odio condimentum a. Vestibulum sagittis aliquet urna, id porta justo posuere eu. Nulla facilisi. Fusce sollicitudin lorem a mauris gravida volutpat. Donec at feugiat diam. Vivamus ultrices metus id ipsum hendrerit efficitur.</aside> </div> <p>Nam neque libero, consequat sed maximus in, commodo quis lacus. Donec tristique velit eget ipsum ultricies, sit amet elementum ex ultrices. Ut tempus ornare mi, vitae ultrices tortor congue non. Suspendisse iaculis ligula nec lectus ultrices sollicitudin. Sed ut aliquet metus. Nunc aliquet ligula risus. Pellentesque ultricies laoreet lacus, eget vehicula justo aliquet nec. Maecenas eget sem lacus. Donec ut orci eu urna finibus consectetur. Mauris in nisi vitae nisi convallis dapibus non eget erat. Proin turpis ipsum, pellentesque a pellentesque nec, molestie scelerisque ipsum. Nullam semper sit amet ligula eu semper.</p> </body> </html>
solution2
0 2021-11-24 22:05:20
Okay, so maybe flexbox is better after all. So in the document we put the aside before the paragraph to which it relates and wrap them both in a div. Now we can float the aside on wide screens, but then on narrow screens we switch to a flex box and use the order property to move the aside after the paragraph.
Just not sure how it will go if you have aside s in multiple sequential paragraphs.
aside { float: right; width: 33%; padding: 16px; background: #999; box-sizing: border-box; margin: 0 0 10px 10px; } @media (max-width: 500px) {.paragraph-with-aside { display: flex; flex-direction: column; } aside { margin: 0; width: auto; order: 99; } }
<html> <body> <div class="paragraph-with-aside"> <aside><sup>1</sup> Maecenas non magna id leo condimentum elementum nec quis urna. Nullam posuere erat libero, at dapibus odio condimentum a. Vestibulum sagittis aliquet urna, id porta justo posuere eu. Nulla facilisi. Fusce sollicitudin lorem a mauris gravida volutpat. Donec at feugiat diam. Vivamus ultrices metus id ipsum hendrerit efficitur.</aside> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae nisl efficitur, placerat nisi et, hendrerit purus. Proin tempor varius maximus. Morbi aliquet est et accumsan suscipit. Nunc fringilla bibendum lacus eu vestibulum. Cras sodales leo ut est faucibus rutrum. Donec sodales nisl at elit cursus vehicula. Nulla facilisi. Maecenas egestas tortor sit amet mauris faucibus iaculis<sup>1</sup>. Praesent eu vulputate orci. Nam tempor sollicitudin ante, at faucibus lorem lacinia quis. Pellentesque volutpat bibendum ligula, quis fermentum purus accumsan ac. Suspendisse ut velit ultricies, eleifend risus id, scelerisque urna. Nullam eu faucibus odio. Curabitur ac auctor lacus. Mauris vitae erat ac justo vehicula euismod.</p> </div> <p>Nam neque libero, consequat sed maximus in, commodo quis lacus. Donec tristique velit eget ipsum ultricies, sit amet elementum ex ultrices. Ut tempus ornare mi, vitae ultrices tortor congue non. Suspendisse iaculis ligula nec lectus ultrices sollicitudin. Sed ut aliquet metus. Nunc aliquet ligula risus. Pellentesque ultricies laoreet lacus, eget vehicula justo aliquet nec. Maecenas eget sem lacus. Donec ut orci eu urna finibus consectetur. Mauris in nisi vitae nisi convallis dapibus non eget erat. Proin turpis ipsum, pellentesque a pellentesque nec, molestie scelerisque ipsum. Nullam semper sit amet ligula eu semper.</p> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.