如何将元素隐藏在较小的元素后面

Question

我正在创建一个自动完成组件，但我遇到了一个问题，因为我希望通过向下滑动来动画化建议。我使用transform: translateYCSS是为了让它在移动设备上发挥作用。

因此，基本上，我需要做的是将建议隐藏在文本框后面，并在用户开始键入时向下滑动并出现。这只是稍微起作用，因为建议列表比文本框高。因此，它无法完全隐藏在文本框后面，因为它是从顶部剪辑出来的。

我创建了一个工作示例，演示了这个链接上的问题，并在这里复制了代码(尝试在文本框中键入(：

document.querySelector(".autocomplete").oninput = e => {
let value = e.target.value;
if (value.length > 0) {
document.querySelector(".suggestions").classList.add("open");
} else {
document.querySelector(".suggestions").classList.remove("open");
}
}

.autocomplete {
border: 1px solid #ddd;
padding: 5px;
width: 500px;
background-color: yellow;
z-index: 1;
position: relative;
}
.suggestions {
border: 1px solid #ddd;
height: 125px;
width: 500px;
transform: translateY(-30px);
transition: .25s;
background-color: #eef;
}
.open {
transform: translateY(0);
}

<p>Some text and a paragraph preceding the autocomplete</p>
<div>
<input class="autocomplete" />
<div class="suggestions">apple, banana, carrot, dog</div>
</div>

我想把transform: translateY(-30px);改为transform: translateY(-130px);，但它会在文本框之前剪辑。我希望它隐藏在文本框后面。此外，我认为我不能在这里使用scale，因为我不希望它在.中动画时看起来很糟糕和失真

根据应用的状态，我可能在此之前具有不同的元素，因此当使用"；把一些东西放在它之前"；可能会起作用，但它看起来很草率，而且不太可扩展。

有办法做到这一点吗？

Answer 1

您可以为输入添加placeholder="type here"，然后在css表中添加

input:not(:placeholder-shown)+div {
display: block;
}
.autocomplete {
display: none;
}

工作笔：https://codepen.io/yael-screenovate/pen/KKVxrrj