0

Hey guys I faced the confusion with stacking context in CSS, that is, as you can see in the code below I used opacity: .99; to create stacking context for both boxes and decided to use z-index for orange box but the orange box is not placed above green one. Why? I thought it is possible to use z-index with elements having transform and opacity attributes. My second question is that since I am beginner I just wanted to ask why when I create stacking context using opacity or transform for a certain element (say div) that div element is placed above other static elements. Is z-index added to the element behind the scenes or something like that. 

.green {
  background: green;
  height: 250px;
  width: 1090px;
  margin-top: -70px;
  opacity: .99;
}

.orange {
  background: orange;
  height: 150px;
  width: 150px;
  opacity: .99;
  z-index: 1000;
}
<div class="orange">Orange</div>
<div class="green">Green</div>
G-Cyrillus
  • 94,270
  • 13
  • 95
  • 118
mirzhal
  • 149
  • 2
  • 11
  • to trigger z-index you need to reset position to relative(or absolute/fixed) or use transform, else , z-index has no effects. https://developer.mozilla.org/en-US/docs/Web/CSS/z-index – G-Cyrillus Apr 07 '19 at 12:26
  • for your second question it's about painting order (Am adding another duplicate) – Temani Afif Apr 07 '19 at 12:27

1 Answers1

1

z-index only applies to positioned elements, which are elements where the position property has a value other than static (which is the default).

Set position: relative.

Quentin
  • 857,932
  • 118
  • 1,152
  • 1,264