-1

I've searched around for other answers but can't seem to fin one specifically... I'm using z-index correctly so I don't get why this is happening. That line you see in the example is supposed to go under the icon and over the sidebar but it is not.

I've tried so far

  1. Fiddling with the z-indexes
  2. Giving the icon in question position absolute
  3. placing the !important keyword on the z-index property

.

.container {
  background-color: #d9d8d7;
  width: 600px;
  height: 500px;
  display: grid; 
  grid-template-rows: repeat(6, 1fr);
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 5px;
}

.text-container {
  background: pink;
  grid-column: 3 / -1;
  grid-row: 1 / 3;
  display: grid;  
  grid-template-rows: repeat(5, 1fr);
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 5px;
}

.top-left-container {
  grid-column: 1 / 4;
  grid-row: 1 / 4;
  position: relative;
  background-color: orange;
/*   position:relative; */
}

.horizontal-line {
  position: absolute; 
  bottom: 75%;
  left:-150%;
  height: 2px;
  width: 300%;
  z-index: ;
  background-color: black;
  /*  z-index level 2 "middle"  */
  z-index: 10;
}

.heading {
/*   background-color:yellow; */
  grid-column: 1 /-1;
  grid-row: 1 / 2;
}

.sidebar {
  background-color: lightblue;
  grid-row: 1 / -1;
  grid-column: 1 / 2;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
/*  z-index level 1  */
  z-index: 5;
}

.sidebar__wrapper {
  display: flex;
  flex-direction: column;
/*   background-color: red; */
}

.sidebar__icon {
  margin: 10px;
  height: 50px;
  width: 50px;
  z-index: 50;
/*  z-index level 3 Why wont'this cover the div
that has a higher z-index than it */
  z-index: 15;
}
<div class="container">
  
  <div class="sidebar">
    <div class="sidebar__wrapper">
      
            <img src="https://cdn0.iconfinder.com/data/icons/images-icons-rounded/110/Image-Focus-512.png" alt="" class="sidebar__icon">
            <img src="https://cdn0.iconfinder.com/data/icons/images-icons-rounded/110/Image-Focus-512.png" alt="" class="sidebar__icon">
            <img src="https://cdn0.iconfinder.com/data/icons/images-icons-rounded/110/Image-Focus-512.png" alt="" class="sidebar__icon">

    </div>    
  </div>
  
  <div class="text-container">

    <div class="top-left-container">
          <div class="heading">Header Here</div>
        <div class="horizontal-line"></div>
    </div>

  </div>
</div>
Osian Mansell
  • 5
  • 2
  • 1
    Read up on stacking contexts. https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ – CBroe Apr 16 '20 at 07:08

2 Answers2

0

So there are four things about z-index:

  1. the lower in the code the higher the placement
  2. adding a transform or opacity will give new z-index context (meaning higher yet again)
  3. positioning an element will do the same as number 2
  4. And lastly, as is in your case, a child element will inherit and be limited by its parent element if its parent element has a z-index set

The solutions:

  1. Either take the child div out, and make it a sibling to the competing z-index div on the page (in your case that line) *recommended
  2. Remove z-index context on parent element, so child again can be free
Branden Adler
  • 60
  • 4
0

Give the element you want to stand out one more z-index

I added z-index .sidebar__wrapper class more then .horizontal-line class

     .container {
          background-color: #d9d8d7;
          width: 600px;
          height: 500px;
          display: grid; 
          grid-template-rows: repeat(6, 1fr);
          grid-template-columns: repeat(6, 1fr);
          grid-gap: 5px;
        }

        .text-container {
          background: pink;
          grid-column: 3 / -1;
          grid-row: 1 / 3;
          display: grid;  
          grid-template-rows: repeat(5, 1fr);
          grid-template-columns: repeat(5, 1fr);
          grid-gap: 5px;
        }

        .top-left-container {
          grid-column: 1 / 4;
          grid-row: 1 / 4;
          position: relative;
          background-color: orange;
        /*   position:relative; */
        }

        .horizontal-line {
          position: absolute; 
          bottom: 75%;
          left:-150%;
          height: 2px;
          width: 300%;
          background-color: black;
          /*  z-index level 2 "middle"  */
          z-index:10;
        }

        .heading {
        /*   background-color:yellow; */
          grid-column: 1 /-1;
          grid-row: 1 / 2;
        }

        .sidebar {
          background-color: lightblue;
          grid-row: 1 / -1;
          grid-column: 1 / 2;
          display: flex;
          flex-direction: column;
          justify-content: start;
          align-items: center;
        /*  z-index level 1  */
         
        }

        .sidebar__wrapper {
          display: flex;
          flex-direction: column;
           z-index: 11;
        /*   background-color: red; */
        }

        .sidebar__icon {
          margin: 10px;
          height: 50px;
          width: 50px;
          z-index: 50;
        /*  z-index level 3 Why wont'this cover the div
        that has a higher z-index than it */
          z-index: 15;
        }



      
    
        <div class="container">
          
          <div class="sidebar">
            <div class="sidebar__wrapper">
              
                    <img src="https://cdn0.iconfinder.com/data/icons/images-icons-rounded/110/Image-Focus-512.png" alt="" class="sidebar__icon">
                    <img src="https://cdn0.iconfinder.com/data/icons/images-icons-rounded/110/Image-Focus-512.png" alt="" class="sidebar__icon">
                    <img src="https://cdn0.iconfinder.com/data/icons/images-icons-rounded/110/Image-Focus-512.png" alt="" class="sidebar__icon">

            </div>    
          </div>
          
          <div class="text-container">

            <div class="top-left-container">
                  <div class="heading">Header Here</div>
                <div class="horizontal-line"></div>
            </div>

          </div>
        </div>
Umutcan
  • 65
  • 6