Z索引未堆叠

Question

I have been trying around for so long, and have read a number of articles and I still don't get it! I am trying got move that little icon to the left of the header, but for some reason its stacking below the parent element!

this is my css:

  .step__content { margin-top: 120px; position: relative; div.ui-accordion-header { margin-left: 30px; &:after { content: ''; position: absolute; height: 20px; width: 20px; left: -7px; background-image: url('../images/i.svg'); z-index: 100; } } } 

here is the html:

the first :after element is the icon!

here is an image:

I want the icon to be at the left of the header! But as I push it left it goes below? The complete image of the icon is not visible because half is underneath!

Answer 1

I think what is actually happening is the pseudo element is just going outside of an overflow: hidden; element...

This works for me (even if you remove the z-index styles). As you can see the psuedo element is over the text. Try changing the :after z-index to -5 and it goes below.

 .step__content { margin-top: 120px; position: relative; } .ui-accordion-header { position: relative; margin-left: 50px; z-index: 1; } .ui-accordion-header:after { content: ''; position: absolute; display: block; height: 30px; width: 30px; margin: auto; top: 0; bottom: 0; left: -20px; background-image: url('https://via.placeholder.com/150'); background-size: cover; background-position: center; z-index: 5; } 

 <div class="step__content"> <div class="ui-accordion-header"> <p>Headers</p> </div> </div> 

Answer 2

I use before pseudo element instead.

  .step__content {
            margin-top: 120px;
            position: relative;

            div.ui-accordion-header {
                margin-left: 30px;

                &::before {
                    content: 'testing';
                    height: 20px;
                    width: 20px;
                    z-index: 100;

                }
            }
        }

<div class="step__content">

<section class="ce_accordionStart ce_accordino block">
  <div id="ui-id-1" class="ui-accordion-header ui-accordion-header-active ui-state-active">

  <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s">
    Header
  </span>
  </div>
</section>
</div>