css - how parent z-index affect to child z-index -


#parent {    position: relative;    background: red;    width: 100px;    height: 100px;    z-index: 1;  }    #child {    position: absolute;    top: 50px;    left: 50px;    z-index: -1;    transform: translatex(20px);  }
<div id="parent">    <p>     qqq    </p>    <div id="child" >      test    </div>  </div>

if don't set parent's z-index 1, child's z-index let under parent. when set parent's z-index 1(or number higher 0), child's z-index won't work!

anyone why happened?

by default, background colour goes behind text. z-index default auto states "sets stack order equal parents". however, using z-index on child move out of natural stack order , place behind background. if change parent have z-index rejoin stack , background colour again appear behind text.

both parent , child set auto. both in same stack.

#parent {    position: absolute;    background: red;    width: 100px;    height: 100px;  }    #child {    position: absolute;    top: 50px;    left: 50px;    transform: translatex(20px);  }
<div id="parent">    <div>     qqq    </div>    <div id="child" >      test    </div>  </div>

child set z-index -1 not in same stack parent

#parent {    position: absolute;    background: red;    width: 100px;    height: 100px;  }    #child {    position: absolute;    top: 50px;    left: 50px;    z-index: -1;    transform: translatex(20px);  }
<div id="parent">    <div>     qqq    </div>    <div id="child" >      test    </div>  </div>

child set z-index -1 , parent set z-index 1 making them both in same stack background color gets put behind both elements.

#parent {    position: absolute;    background: red;    width: 100px;    height: 100px;    z-index: 1;  }    #child {    position: absolute;    top: 50px;    left: 50px;    z-index: -1;    transform: translatex(20px);  }
<div id="parent">    <div>     qqq    </div>    <div id="child" >      test    </div>  </div>


Comments

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

vue.js - Create hooks for automated testing -

Add new key value to json node in java -