2020-10-29

当html中position的fixed和sticky同时使用时，出现fixed元素被sticky元素覆盖的情况，以及解决方案。

没滚动时，还没发现问题，如下图

滚动之后出现了问题，position：fixed元素被position： sticky元素覆盖的情况

只需要调整z-index的值即可解决

<div class="box1">
  <div class="box2">
    <div class="box2-1">
      <p>top</p>
    </div>
    <div class="box3">
            <dl>
              <dt>A</dt>
              <dd>Andrew W.K.</dd>
              <dd>Apparat</dd>
              <dd>Arcade Fire</dd>
              <dd>At The Drive-In</dd>
              <dd>Aziz Ansari</dd>
            </dl>
            <dl>
              <dt>C</dt>
              <dd>Chromeo</dd>
              <dd>Common</dd>
              <dd>Converge</dd>
              <dd>Crystal Castles</dd>
              <dd>Cursive</dd>
            </dl>
            <dl>
              <dt>E</dt>
              <dd>Explosions In The Sky</dd>
            </dl>
            <dl>
              <dt>T</dt>
              <dd>Ted Leo & The Pharmacists</dd>
              <dd>T-Pain</dd>
              <dd>Thrice</dd>
              <dd>TV On The Radio</dd>
              <dd>Two Gallants</dd>
            </dl>

            <dl>
              <dt>A</dt>
              <dd>Andrew W.K.</dd>
              <dd>Apparat</dd>
              <dd>Arcade Fire</dd>
              <dd>At The Drive-In</dd>
              <dd>Aziz Ansari</dd>
            </dl>
            <dl>
              <dt>C</dt>
              <dd>Chromeo</dd>
              <dd>Common</dd>
              <dd>Converge</dd>
              <dd>Crystal Castles</dd>
              <dd>Cursive</dd>
            </dl>
            <dl>
              <dt>E</dt>
              <dd>Explosions In The Sky</dd>
            </dl>
            <dl>
              <dt>T</dt>
              <dd>Ted Leo & The Pharmacists</dd>
              <dd>T-Pain</dd>
              <dd>Thrice</dd>
              <dd>TV On The Radio</dd>
              <dd>Two Gallants</dd>
            </dl>
          </div>
  </div>
</div>

* {
  box-sizing: border-box;
}
.box1{
  position: absolute;
  top: 120px;

}
.box2-1 {
  background: red;
  position: fixed;
  z-index: 1;  //在这里修改z-index值进行调整
  top: 100px;
  width: 100%;
}
.box3{

  overflow: auto;
  height: 500px;
}
dl {
  margin: 0;
  padding: 24px 0 0 0;
}

dt {
  background: #B8C1C8;
  border-bottom: 1px solid #989EA4;
  border-top: 1px solid #717D85;
  color: #FFF;
  font: bold 18px/21px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  
}

dd {
  font: bold 20px/45px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}

dd + dd {
  border-top: 1px solid #CCC
}