flexbox-child-is-abspos-container-2-ref.html 639 B

12345678910111213141516171819202122232425262728293031
  1. <!-- Any copyright is dedicated to the Public Domain.
  2. http://creativecommons.org/publicdomain/zero/1.0/ -->
  3. <html>
  4. <head>
  5. <style>
  6. body { margin-top: 50px }
  7. .relpos_parent {
  8. position: relative;
  9. width: 100px;
  10. height: 100px;
  11. background: lightblue;
  12. }
  13. .abspos_child {
  14. position: absolute;
  15. left: 30px;
  16. bottom: 10px;
  17. width: 20px;
  18. height: 130px;
  19. background: purple;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <div>
  25. <div class="relpos_parent">
  26. <div class="abspos_child"></div>
  27. </div>
  28. </div>
  29. </body>
  30. </html>