What has bigger priority: opacity or z-index in browsers?
This is not a bug and is actually how it's supposed to work. It's a bit confusing as the elaborate description of Stacking Contexts doesn't mention anything about it. However, the visual formatting module links to the color module where this particular gotcha can be found (emphasis mine):
Since an element with opacity less than 1 is composited from a single
offscreen image, content outside of it cannot be layered in z-order
between pieces of content inside of it. For the same reason,
implementations must create a new stacking context for any element
with opacity less than 1. If an element with opacity less than 1 is
not positioned, implementations must paint the layer it creates,
within its parent stacking context, at the same stacking order that
would be used if it were a positioned element with ‘z-index: 0’ and
‘opacity: 1’. If an element with opacity less than 1 is positioned,
the ‘z-index’ property applies as described in [CSS21], except that
‘auto’ is treated as ‘0’ since a new stacking context is always
created. See section 9.9 and Appendix E of [CSS21] for more
information on stacking contexts. The rules in this paragraph do not
apply to SVG elements, since SVG has its own rendering model ([SVG11],
Chapter 3).
Possible Opacity Z-Index Bug
This issue is already known.
https://www.google.com/#q=opacity%20change%20z-index
You should use rgba background, which is also a widely supported property.
Z-Index and Opacity not working as expected
If the issue is just that the buttons and things overlap the top header when you scroll, simply put a high z-index on the #top element. E.g.
#top {
z-index: 1000;
}
How to fix a z-index issue in Bootstrap?
please update your css like this
/*----------ESTILOS MENU -----------*/
.menuBtn {
height: 30px;
width: 30px;
position: absolute;
right: 20px;
top: 10px;
z-index: 101;
}
.menuBtn > span {
background-color: var(--color-primario);
height: var(--altura-linea);
width: 100%;
position: absolute;
left: 50%;
top: 50%;
margin: -1px 0 0 -15px;
transition: height 100ms;
}
.menuBtn > span:after,
.menuBtn > span:before {
content: '';
background-color: var(--color-primario);
height: var(--altura-linea);
width: 100%;
position: absolute;
left: 50%;
margin-left: -15px;
transition: all 200ms;
}
.menuBtn > span:after {
top: -7px;
}
.menuBtn > span:before {
bottom: -7px;
}
.menuBtn.act > span {
height: 0;
}
.menuBtn.act > span:after,
.menuBtn.act > span:before {
background-color: #008877;
top: 1px;
}
.menuBtn.act > span:after {
transform: rotate(45deg);
}
.menuBtn.act > span:before {
transform: rotate(-45deg);
}
/* main menu block */
.mainMenu {
background-color: var(--color-blanco);
position: fixed;
left: 0;
top: 0;
z-index: 100;
height: 100%;
width: 100%;
display: table;
text-align: center;
opacity: 0;
transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transform: scale(0);
}
.mainMenu.act {
opacity: 1;
transform: scale(1);
}
.mainMenu.act ul li {
opacity: 1;
transform: translateX(0);
}
.mainMenu ul {
display: table-cell;
vertical-align: middle;
}
.mainMenu li {
padding: 8px 0;
transition: all 400ms 510ms;
opacity: 0;
}
.mainMenu li:nth-child(odd) {
transform: translateX(30%);
}
.mainMenu li:nth-child(even) {
transform: translateX(-30%);
}
.mainMenu li:last-child {
transform: none;
}
.mainMenu a {
color: #19b698;
display: inline-block;
font-size: 18px;
}
.mainMenu a.suBtn {
color: var(--color-blanco);
}
.act{
background-color: red;
}
Div, z-index, opacity. Bug, feature or user relate issue?
Your problem is with an unexpected stacking context being established by #menu
.
To quote MDN:
A stacking context is formed, anywhere in the document, by any element
which is either
- the root element (HTML),
- positioned (absolutely or relatively) with a z-index value other than "auto",
- elements with an opacity value less than 1.
This is the reason your div is behaving unexpectedly when you apply an opacity < 1 to it. #menu
now establishes a separate stacking context, and the z-index of its descendant #status
has no meaning outside of this context. To correct this problem, apply the z-index to #menu
itself.
Related Topics
Gmail Responsive Email - Media Queries - Style Tag
Polymer @Import Theme File with :Host in Styles Has No Affect
CSS Div Id Used Only Once Per Page
IE7 Absolute Element Appearing Behind Relative One
Clear Fix and Uncollapse Margins with CSS Without Side Effects
Can You Use Rgba Colours in Gradients Produced with Internet Explorer's Filter Property
How to Create Vertical Text Using Only CSS
CSS - Force Overflowing Elements to Disappear If Partially Hidden
Css3 Image Crossfade (No JavaScript)
Css: Adding a Border Changes the Background-Color (!)
How to Round-Off an Image with CSS
CSS Drop-Down Menus Pushing Page Content Down
IE9 Issue Border Radius and Linear Gradient
Two Fixed Width Full Height Columns, with Seamless Transition to Blank Space
CSS Problem to Make 2 Divs Float Side by Side