flexbox-child-is-abspos-container-1.html 806 B

123456789101112131415161718192021222324252627282930313233
  1. <!-- Any copyright is dedicated to the Public Domain.
  2. http://creativecommons.org/publicdomain/zero/1.0/ -->
  3. <!-- This testcase has a -moz-box element with a block as its only child, which
  4. forms a containing block for an absolutely positioned grandchild. -->
  5. <html>
  6. <head>
  7. <style>
  8. .box { display: -moz-box }
  9. .relpos_parent {
  10. position: relative;
  11. width: 100px;
  12. height: 100px;
  13. background: lightblue;
  14. }
  15. .abspos_child {
  16. position: absolute;
  17. left: 30px;
  18. bottom: 10px;
  19. width: 20px;
  20. height: 20px;
  21. background: purple;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <div class="box">
  27. <div class="relpos_parent">
  28. <div class="abspos_child"></div>
  29. </div>
  30. </div>
  31. </body>
  32. </html>