<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bug 1055658 - Relative positioning for ruby</title> <script type="text/javascript" src="utils.js"></script> </head> <body style="font-family: monospace"> <div style="height: 80px; line-height: 80px;"> before <div style="position: relative; top: 20px; display: inline-block"> <span id="inline" style="position: relative"> <div id="annotation" style="position: absolute; top: -100%;"> text1 <span style="position: relative; top: -20px;">text2</span> <span style="position: relative; right: 10px;">text3</span> </div> base1 <span style="position: relative; left: 10px;">base2</span> <span style="position: relative; bottom: -20px;">base3</span> </span> </div> after </div> <script type="text/javascript"> makeBSizeMatchInlineBox(document.getElementById('annotation'), document.getElementById('inline')); </script> </body> </html>