details-absolute-children-ref.html 814 B

1234567891011121314151617181920212223242526272829303132333435363738394041
  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. div#details {
  7. background-color: orange;
  8. width: 500px;
  9. height: 200px;
  10. }
  11. div#summary {
  12. background-color: green;
  13. width: 50%;
  14. }
  15. div#in_summary {
  16. position: absolute;
  17. background-color: green;
  18. top: 60px;
  19. left: 100px;
  20. width: 150px;
  21. height: 100px;
  22. }
  23. div#before_summary {
  24. position: absolute;
  25. background-color: cyan;
  26. top: 50px;
  27. left: 50px;
  28. width: 150px;
  29. height: 100px;
  30. z-index: 1;
  31. }
  32. </style>
  33. <body>
  34. <div id="details">
  35. <div id="before_summary">div before summary</div>
  36. <div id="summary">Summary<div id="in_summary">div in summary</div></div>
  37. </div>
  38. </body>
  39. </html>