Tutorial :Why CSS opacity is affecting div above it?



Question:

I have overlay inside HTML element and inside that overlay I have element that contains message. But for some reson upper element gets also opacity from element under it.

EDIT: I only have tested this with latest Firefox.

Here is CSS example code to explain problem:

.overlay {      z-index: 1000;      border: medium none;      margin: 0pt;      padding: 0pt;      width: 100%;      height: 100%;      top: 0pt;      left: 0pt;      background-color: #fff;      opacity: 0.6;      cursor: wait;      position: absolute;  }  .overlay .message {      z-index: 1001;      position: absolute;      padding: 0px;      margin: auto;      width: 30%;      top: 15%;      left: 30%;      text-align: center;      color: #fff;      border: 3px solid red;      background-color: #fff;      background: fuchsia;      font-size: 18px;      font-weight: bold;      padding: 5%;  }  

And here is HTML code:

<div class="overlay">      <div class="message">          test      </div>  </div>  


Solution:1

The opacity effects not just the element itself but everything in overlay (so message too). It works if you separate the overlay and the message:

<div class="modal">      <div class="overlay">overlay</div>      <div class="message">message</div>  </div>  

And the CSS:

.modal {      position: absolute;      top: 0;      left: 0;      width: 100%;      height: 100%;  }  .overlay {      /* … */  }  .message {      /* … */  }  

Here message is not a descendant of overlay and thus not affected by overlay’s style.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »