html - Z-index doesn't work in chrome but does in firefox -


i've been trying fix while don't seem able to.

* {  margin: 0;  padding: 0;  }  ul.tabs {  position: relative;  list-style-type: none;  margin-left: 30px;  }  ul.tabs li {  position: relative;  display: inline-block;  z-index: -1;  color: #06e;  -webkit-border-radius: 5px 5px 0 0;  border-radius: 5px 5px 0 0;  padding: 0.4em 1em 0.4em 1em;  margin-right: 5px;  border: 1px solid #aaa;  border-bottom: 1px solid #fff;  }  ul.tabs li.active {  position: relative;  z-index: 2;  }  .content {  z-index: 1;  position: relative;  margin-top: -1px;  -webkit-border-radius: 5px;  border-radius: 5px;  padding: 10px;  border: 1px solid #aaa;  }
<ul class="tabs">    <a href="#">      <li class="active">-</li>    </a>    <a href="#">      <li>+</li>    </a>  </ul>  <div class="content">    text  </div>

in firefox has wanted behavior (the active (-) tab being above content div therefore hiding border underneath it. in chrome however, not happen.

try settings background active list element. ff seems hide behind elements lower z-index, while chrome not.

ul.tabs li.active {     background-color: white; } 

Comments

Popular posts from this blog

python - No exponential form of the z-axis in matplotlib-3D-plots -

php - Best Light server (Linux + Web server + Database) for Raspberry Pi -

c# - "Newtonsoft.Json.JsonSerializationException unable to find constructor to use for types" error when deserializing class -