为什么我给z-index

Question

每当我将sticky and z-index应用于位置z-index的元素时，位置sticky就会出现问题

问题：我想在没有任何包含（简单方式）的情况下将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;
  }

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

选项2

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

使图标的z索引大于0。

无论哪种方式，您都必须确保将较高的z-index应用于想要放置在前面的物体。

Answer 2

/* how can a class be clasified as sticky and relative at the same time ?????? its eigther sticky or not, you cant use X index and using like 3 diferent positions for it*/
.sticky {
position: sticky;
top: 0;
}

.icon2:after{
    content: "...";
    font-size: 31px;
}
.no-sticky {
height: 1000px;
}
/* when you stick something you need to tell the position of that item, you did everthing backwards, also you need to add a lenght to the height to be able to scroll the sticky part of it, otherwise is not going to move*/

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

<hr>

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

这里是您的操作方式。 请记住，您要全班上课，而不仅仅是图标。