details-absolute-children.html 940 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <!DOCTYPE html>
  2. <!-- Any copyright is dedicated to the Public Domain.
  3. - http://creativecommons.org/publicdomain/zero/1.0/ -->
  4. <html>
  5. <style>
  6. details {
  7. background-color: orange;
  8. width: 500px;
  9. height: 200px;
  10. }
  11. summary::-moz-list-bullet {
  12. /* Hide the triangle for comparing with div in reftest. */
  13. list-style-type: none;
  14. }
  15. summary {
  16. background-color: green;
  17. width: 50%;
  18. }
  19. div#in_summary {
  20. position: absolute;
  21. background-color: green;
  22. top: 60px;
  23. left: 100px;
  24. width: 150px;
  25. height: 100px;
  26. }
  27. div#before_summary {
  28. position: absolute;
  29. background-color: cyan;
  30. top: 50px;
  31. left: 50px;
  32. width: 150px;
  33. height: 100px;
  34. }
  35. </style>
  36. <body>
  37. <details open>
  38. <div id="before_summary">div before summary</div> <!-- This div is at front. -->
  39. <summary>Summary<div id="in_summary">div in summary</div></summary>
  40. </details>
  41. </body>
  42. </html>