z-index not working with fixed positioning

by

Add position: relative; to #over

    #over {
      width: 600px;
      z-index: 10;
      position: relative;    
    }
    
    #under {
      position: fixed;
      top: 5px;
      width: 420px;
      left: 20px;
      border: 1px solid;
      height: 10%;
      background: #f0f;
      z-index: 1;
    }
    <!DOCTYPE html>
    <html>
    <body>
        <div id="over">
            Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
        </div>  
    
        <div id="under"></div>
    </body>
    </html>

Fiddle

More Related Contents:

  1. Why can’t an element with a z-index value cover its child?
  2. Understanding z-index stacking order
  3. Is it possible to set the stacking order of pseudo-elements below their parent element? [duplicate]
  4. IE7 Z-Index Layering Issues
  5. z-index is canceled by setting transform(rotate)
  6. Which CSS properties create a stacking context?
  7. How to get a parent element to appear above child [duplicate]
  8. What has bigger priority: opacity or z-index in browsers?
  9. How to make child element higher z-index than parent? [duplicate]
  10. IE7 Z-Index issue – Context Menu
  11. Z-Index Relative or Absolute?
  12. Internet Explorer z-index bug?
  13. z-index does not work in Internet Explorer with pdf in iframe
  14. Z-index with before pseudo-element
  15. css z-index issue with nested elements
  16. ::before pseudo-element stacking order issue
  17. Stacking order of elements affected by opacity
  18. Float a div above page content
  19. Bootstrap Modal sitting behind backdrop
  20. Why does stacking order change on webkit filter hover?
  21. CSS negative z-index: what does it mean?
  22. Remove blue underline from link
  23. Child inside parent with min-height: 100% not inheriting height
  24. CSS – Overflow: Scroll; – Always show vertical scroll bar?
  25. How to make a footer fixed in the page bottom
  26. Is there a workaround to make CSS classes with names that start with numbers valid? [duplicate]
  27. Difference between static and relative positioning
  28. What bug does zoom:1; fix in CSS?
  29. CSS3 ::selection behaves differently in FF & Chrome
  30. Fill only Half a star with SVG

Leave a Comment