html - 为什么当我给 z-index 时位置粘性内容消失了

Question

每当我将 z-index 应用于定位的 sticky 元素时，我的位置 sticky 和 ​​z-index 就会出现问题，它的内容正在消失

问题:我想使用 z-index 定位 sticky 元素，不包含任何内容(简单方法)

下面是我的问题:

.sticky,.no-sticky{
  width:250px;
  position: relative;
  
}

.sticky input{
   position: sticky;  
   z-index: 23;
}

.icon:before{
    content: "...";
    position: absolute;
    font-size: 31px;
    top: -16px;
    right: 84px;
}

/* ====== run ===================2 */

.sticky1,.no-sticky1{
  width:250px;
  position: relative;
  
}

.sticky1 input{
   position: sticky;  
   /*z-index: 23;*/
}

<div class="no-sticky">
    <input type="text">
    <span class="icon"></span>
</div>

<hr>

<p>see below input ... dots are not appearing </p>

<div class="sticky">
    <input type="text">
    <span class="icon"></span>
</div>


<h1>Run without z-index</h1>

<div class="no-sticky1">
    <input type="text">
    <span class="icon"></span>
</div>

<hr>

<div class="sticky1">
    <input type="text">
    <span class="icon"></span>
</div>

问题显示:

#container{
  width:175px;
  height: 200px;
/*   background:#ccc; */
  overflow-y:scroll;
  overflow-x:hidden;
  position: relative;
  z-index:40px;
}

input{
   position: sticky;  
   /*z-index: 23; */
   top:0;
   left:0;
  border:none;
  outline: 1px solid #cccccc52;
}

.icon:before{
  content:"...";
  position: absolute;
  font-size:30px;
  top:-16px;
}

<div id="container">
  <span style="position:relative;">
      <input type="text">
    <span class="icon"></span>
  </span>
  <p>lorem</p>
  <p>lorem</p>
  <p>lorem</p>
  <p>lorem</p>
  <p>lorem</p>
  <p>lorem</p>
  <p>lorem</p>
  <p>lorem</p>
  <p>lorem</p>
  <p>lorem</p>
</div>

请帮助我提前谢谢!!!

Answer 1

选项一

  .sticky input{
     position: sticky;  
     z-index: -1;
  }

使输入的 z 索引为 -1，使其位于点的后面。

选项二

  .icon:before{
      content: "...";
      position: absolute;
      font-size: 31px;
      top: -16px;
      right: 84px;
      z-index: 1;
  }

使图标的z-index高于0。

无论哪种方式，您只需确保将更高的 z-index 应用于您想要放在前面的内容。