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
  • 101,410
  • 14
  • 105
  • 129
mirzhal
  • 159
  • 1
  • 2
  • 14
  • 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
  • 914,110
  • 126
  • 1,211
  • 1,335