I implemented this in my online book[1] and it wasn't too bad. Try resizing the window to see.

The entirety of the JS (not including jQuery) is:

    $(document).ready(function() {
      $(window).resize(refreshAsides);

      // Since we may not have the height correct for the images, adjust the asides
      // too when an image is loaded.
      $('img').load(function() {
        refreshAsides();
      });

      // On the off chance the browser supports the new font loader API, use it.
      if (document.fontloader) {
        document.fontloader.notifyWhenFontsReady(function() {
          refreshAsides();
        });
      }

      // Lame. Just do another refresh after a second when the font is *probably*
      // loaded to hack around the fact that the metrics changed a bit.
      window.setTimeout(refreshAsides, 200);

      refreshAsides();
    });

    function refreshAsides() {
      // Don't position them if they're inline.
      if ($(document).width() < 800) return;

      // Vertically position the asides next to the span they annotate.
      $("aside").each(function() {
        var aside = $(this);

        // Find the span the aside should be anchored next to.
        var name = aside.attr("name");
        var span = $("span[name='" + name + "']");
        if (span == null) {
          window.console.log("Could not find span for '" + name + "'");
          return;
        }

        aside.offset({top: span.position().top - 3});
      });
    }

In my book, the asides are positioned very precisely next to certain lines. If you don't need that level of precision, a pure CSS solution is possible, I think.

Overlapping footnotes could be a problem, but to me that's a case where trying to completely separate design from content is a bad idea. Design should optimize for the actual prose you have and not all possible copy you might write. Likewise, it's often worth tweaking copy a bit to make it look better with your design.

In a couple of cases with my book, I tweaked or rearranged asides to avoid them overlapping.

[1]: http://gameprogrammingpatterns.com/introduction.html

ORLY?

http://codepen.io/dredmorbius/pen/OVmKZX

https://m.imgur.com/a/TXpis