Z-index 元素不滚动

Question

我有一个应用程序，其中有一个容器，在该容器内，用户可以在输入中键入一个值，同时他键入一个自动完成框（具有 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 就可以达到我想要的效果？

提前致谢！

Answer 1

尝试将 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>

Answer 2

在此处输入代码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>

Z-index 元素不滚动

Z-index element isn't scrolling

css

z-index