relative-positioning-2-ref.html 1.0 KB

12345678910111213141516171819202122232425262728293031
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Bug 1055658 - Relative positioning for ruby</title>
  6. <script type="text/javascript" src="utils.js"></script>
  7. </head>
  8. <body style="font-family: monospace">
  9. <div style="height: 80px; line-height: 80px;">
  10. before
  11. <div style="position: relative; top: 20px; display: inline-block">
  12. <span id="inline" style="position: relative">
  13. <div id="annotation" style="position: absolute; top: -100%;">
  14. text1
  15. <span style="position: relative; top: -20px;">text2</span>
  16. <span style="position: relative; right: 10px;">text3</span>
  17. </div>
  18. base1
  19. <span style="position: relative; left: 10px;">base2</span>
  20. <span style="position: relative; bottom: -20px;">base3</span>
  21. </span>
  22. </div>
  23. after
  24. </div>
  25. <script type="text/javascript">
  26. makeBSizeMatchInlineBox(document.getElementById('annotation'),
  27. document.getElementById('inline'));
  28. </script>
  29. </body>
  30. </html>