stacking-context-common.css 506 B

123456789101112131415161718192021222324252627
  1. .contain, .maybesc {
  2. width: 100px;
  3. height: 100px;
  4. }
  5. .contain, .maybesc {
  6. position: relative;
  7. }
  8. .inner1, .inner3, .intruder {
  9. position: absolute;
  10. top: 0; left: 0; bottom: 0; right: 0;
  11. }
  12. .inner1 {
  13. left: 5px; right: 30px;
  14. background: rgba(0, 255, 255, 0.5); /* aqua */
  15. z-index: 1;
  16. }
  17. .inner3 {
  18. left: 30px; right: 5px;
  19. background: rgba(255, 255, 0, 0.5); /* yellow */
  20. z-index: 3;
  21. }
  22. .intruder {
  23. top: 20px; bottom: 20px;
  24. background: rgba(255, 0, 255, 0.5); /* fuchsia */
  25. z-index: 2;
  26. }