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
EmoticonEmoticon