flexbox-position-fixed-3-ref.xhtml 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!--
  3. Any copyright is dedicated to the Public Domain.
  4. http://creativecommons.org/publicdomain/zero/1.0/
  5. -->
  6. <!-- Reference case for fixed-position flex container. -->
  7. <html xmlns="http://www.w3.org/1999/xhtml">
  8. <head>
  9. <style>
  10. div.containingBlock {
  11. top: 15px;
  12. left: 20px;
  13. height: 400px;
  14. position: absolute;
  15. border: 2px dashed purple;
  16. }
  17. div.flexbox {
  18. top: 30px;
  19. left: 40px;
  20. width: 200px;
  21. height: 100px;
  22. position: fixed;
  23. border: 1px solid black;
  24. }
  25. div.a {
  26. width: 80px;
  27. height: 100px;
  28. background: lightgreen;
  29. display: inline-block;
  30. }
  31. div.b {
  32. width: 120px;
  33. height: 100px;
  34. background: yellow;
  35. display: inline-block;
  36. }
  37. </style>
  38. </head>
  39. <body>
  40. <div class="containingBlock">
  41. <div class="flexbox"><div class="a"/><div class="b"/></div>
  42. </div>
  43. </body>
  44. </html>