Z-index 元素不滚动答案

【问题标题】：Z-index element isn't scrollingZ-index 元素不滚动
【发布时间】：2021-12-21 13:29:43
【问题描述】：

我有一个应用程序，其中有一个容器，在该容器内，用户可以在输入中键入一个值，而他键入一个自动完成框（具有 z-index 属性的元素）显示在输入下方，一旦他按回车键，输入值保存在标签内。 html 和 css 的简要示例可以在 this codepen 中看到（下面的代码相同）

.main {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  width: 100vw;
}

.tag-container {
  align-content: flex-start;
  border: 1px solid black;
  display: flex;
  flex-direction: center;
  flex-wrap: wrap;
  gap: 5px;
  overflow-y: scroll;
  padding: 5px;
  height: 70px;
  width: 600px;
}

.tag {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  height: 30px;
  width: 100px;
}

.input {
  height: 25px;
  width: 145px;
}

.auto-complete-box {
  background: #F6F2F2;
  border: 1px solid black;
  position: absolute;
  height: 150px;
  text-align: center;
  width: 150px;
  z-index: 1;
}

<div class="main">
  <div class="tag-container">
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class=input-container>
      <input
        class="input"
        type="text"
        placeholder="input"
      />
      <div class="auto-complete-box">
        Auto Complete Box
      </div>
    </div>
  </div>
</div>

问题是当我的容器开始滚动时（添加了更多标签），z-index 元素似乎没有跟随它。就像在这个codepen example 中一样（下面的代码相同）

.main {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  width: 100vw;
}

.tag-container {
  align-content: flex-start;
  border: 1px solid black;
  display: flex;
  flex-direction: center;
  flex-wrap: wrap;
  gap: 5px;
  overflow-y: scroll;
  padding: 5px;
  height: 70px;
  width: 600px;
}

.tag {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  height: 30px;
  width: 100px;
}

.input {
  height: 25px;
  width: 145px;
}

.auto-complete-box {
  background: #F6F2F2;
  border: 1px solid black;
  position: absolute;
  height: 150px;
  text-align: center;
  width: 150px;
  z-index: 1;
}

<div class="main">
  <div class="tag-container">
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class=input-container>
      <input
        class="input"
        type="text"
        placeholder="input"
      />
      <div class="auto-complete-box">
        Auto Complete Box
      </div>
    </div>
  </div>
</div>

有没有办法只用 CSS 来实现我想要的？

提前致谢！

【问题讨论】：

你需要position: relativeinput-container
嘿@RobertoZvjerković，感谢您的回答，但如果我将position: relative 添加到input-container，z-index 元素将不会将自己定位在其他元素之上...
你为什么不用datalist？ developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
嘿@RatajS！这实际上是个好主意！ datalist 将按照我想要的方式工作。感谢您的宝贵时间！

标签： css z-index

【解决方案1】：

在此处输入代码z-index 无法做到这一点。这需要 JavaScript 中的滚动事件。

let tagContainer = document.querySelector('.tag-container')
let autoCompleteBox = document.querySelector('.auto-complete-box')
let input = document.querySelector('.input')

tagContainer.addEventListener('scroll', function (e) {
    if (e.target.scrollTop == e.target.scrollHeight - e.target.clientHeight) {
        autoCompleteBox.style.top = `${tagContainer.offsetTop + tagContainer.offsetHeight - 6}` + "px";
        autoCompleteBox.style.display= "block";
    } else if (e.target.scrollTop < e.target.scrollTop < e.target.scrollHeight - e.target.clientHeight) {
        autoCompleteBox.style.display= "none";
    } 
})

.main {
    align-items: center;
    display: flex;
    height: 100vh;
    justify-content: center;
    width: 100vw;
}

.tag-container {
    align-content: flex-start;
    border: 1px solid black;
    display: flex;
    flex-direction: center;
    flex-wrap: wrap;
    gap: 5px;
    overflow-y: scroll;
    padding: 5px;
    height: 70px;
    width: 600px;
}

.tag {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
    height: 30px;
    width: 100px;
}

.input {
    height: 25px;
    width: 145px;
}

.auto-complete-box {
    display: none;
    background: #F6F2F2;
    border: 1px solid black;
    position: absolute;
    top: 74px;
    height: 150px;
    text-align: center;
    width: 150px;
    z-index: 1;
}

<div class="main">
    
    <div style="position: relative;">
        <div class="tag-container">
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            
            <div class=input-container>
                <input class="input" type="text" placeholder="input" />
                <div class="auto-complete-box">
                    Auto Complete Box
                </div>
            </div>
        </div>
    </div>
</div>

【讨论】：

嘿@Muhammad Ali Malekzadeh，感谢您的回答！它按照我想要的方式工作。感谢您的宝贵时间。
@JefersonSchimuneck - 不客气，我很高兴你的问题得到了解决......如果我的回答解决了你的问题，请选择左侧的“你接受这个答案”选项。谢谢?

【解决方案2】：

尝试在auto-complete-box 上将绝对定位更改为position: relative;

position: sticky; 也可以正常工作。

.main {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  width: 100vw;
}

.tag-container {
  align-content: flex-start;
  border: 1px solid black;
  display: flex;
  flex-direction: center;
  flex-wrap: wrap;
  gap: 5px;
  overflow-y: scroll;
  padding: 5px;
  height: 70px;
  width: 600px;
}

.tag {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  height: 30px;
  width: 100px;
}

.input {
  height: 25px;
  width: 145px;
}

.auto-complete-box {
  background: #F6F2F2;
  border: 1px solid black;
  position: relative;
  height: 150px;
  text-align: center;
  width: 150px;
  z-index: 1;
}

<div class="main">
  <div class="tag-container">
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class=input-container>
      <input
        class="input"
        type="text"
        placeholder="input"
      />
      <div class="auto-complete-box">
        Auto Complete Box
      </div>
    </div>
  </div>
</div>

【讨论】：

感谢四位您的回答@Kameron，但是这样 z-index 元素不再显示在其他元素之上... =(