1

I want green box to appear top of blue. The issue on my app is similar to this (lots of divs between the target and the root. z-index comes from one of the ancestors like this). I can't touch the ancestors nor the blue box which means I can't move the blue box or change the css properties of anything other than the green box. So, the div with z1 will have a lower z-index than the blue box. On the other hand I can do anything to green box. Is moving the green box out of there is the only solution?

.green, .blue {
  position: absolute;
  width: 100px;
  color: white;
  line-height: 100px;
  text-align: center;
}

.green {
  top: 20px;
  left: 20px;
  background: green;
}

.blue {
  top: 60px;
  left: 60px;
  background: blue;
}

.relative {
  position: relative;
}

.z1 {
  z-index: 1;
}

.z10 {
  z-index: 10;
}

.z100 {
  z-index: 100;
}
<div>
  <div class="z1 relative">
    <div>
      <div>
        <div>
          <div>
            <div>
              <span class="green z100">Green</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="z10 relative">
  <span class="blue">Blue</span>
</div>
Alk
  • 313
  • 4
  • 13
  • Add z index of 2 on z1 and 1 on z10. – Salman A Dec 14 '21 at 17:22
  • Could you clarify better as to what you mean by you cannot touch the code(css & html) because you said you can move the green box out which is touching the html – Huangism Dec 14 '21 at 17:25
  • Are you saying that you cannot change the CSS for the ancestor (which has class z1)? – A Haworth Dec 14 '21 at 17:27
  • @AHaworth yes. I updated the question, sorry for not being clear enough. – Alk Dec 14 '21 at 17:28
  • 1
    In that case, yes, moving the green box out of there is what you'll have to do as it cannot get 'above' the index set for its ancestor. – A Haworth Dec 14 '21 at 17:31
  • 1
    If you can only update `z100` div then you need to move it out. The ancestor is on a lower level and since you cannot change it, the content of the ancestor will always be at a lower level compared to the blue – Huangism Dec 14 '21 at 17:32
  • The two elements you are concerned about are not relatives at all, so the term "ancestor" here is incorrect. – TylerH Dec 14 '21 at 17:37
  • Related: https://stackoverflow.com/questions/2503705/how-to-get-a-child-element-to-show-behind-lower-z-index-than-its-parent – TylerH Dec 14 '21 at 17:37

0 Answers0