0

I have following code snippet in css

<style>
#overload {
    background-color:black;
    opacity:0.6;
    position:fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color:#FFFFFF;  
}

  .test {
    width:50px; height:50px; background-color:white; color black; z-index:1000;
}
 </style>

HTML coding

<div id="overload"> </div>
<div class="test">Testing </div>

I want to display "Testing" content above the layer "overload" how can I achieve it through css ? As I tried using z-index and not working as expected.

https://jsfiddle.net/gt7kk643/

Tom
  • 500
  • 3
  • 5
  • 16
  • [`z-index` works only on *positioned* elements](https://developer.mozilla.org/en/docs/Web/CSS/z-index). Set `position: relative` or absolute etc to the `.test` element. – Harry Oct 15 '16 at 15:16
  • Thank you .. here is the fiddle https://jsfiddle.net/gt7kk643/ – Tom Oct 15 '16 at 15:19
  • Tried setting position for test element , but not working. – Tom Oct 15 '16 at 15:30
  • @Tom: Maybe you made a mistake (or your exact code isn't provided here?). It does seem to work - https://jsfiddle.net/gt7kk643/1/ – Harry Oct 15 '16 at 15:44

0 Answers0