Question

I’m trying to get the “div.transbox table” to not have the opacity from “div.transbox”.

If I try removing the table from the main transbox CSS then I can’t get the table to sit on top of “div.transbox”.

Any help much appreciated

div.transbox
  {
  width:1000px;
  height:1500px;
  margin-left: auto;
  margin-right: auto;
  background-color:#ffffff;
  border:1px solid black;
  opacity:0.8;
  z-index:-1;
  filter:alpha(opacity=80); /* For IE8 and earlier */
  }

div.transbox p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  z-index:-1;
  }

div.transbox table
  {
  margin:30px 40px;
  font-weight:bold;
  color:black;
  background-color:#cccccc;
  z-index:99;
  }

Answer 1

You cannot make child elements “more visible” when the parent element has an adjusted opacity.

opacity‘s value ranges from 0 to 1, and the properties stack. In the example below, the “real” opacity of the <p> element is not 0.5, but 0.8 * 0.5 = 0.4:

.transbox   { opacity: 0.8; }
.transbox p { opacity: 0.5; }