我正在尝试做到这一点，以便当有人单击输入框时它会升到屏幕顶部。我能够完成这项工作，但我无法让父 div 中的其他内容随之移动。这是我所拥有的：
container{
}
input#search-bar:focus{
position: absolute;
border: 1px solid #008ABF;
transition: 0.35s ease;
color: #008ABF;
margin-top: -10px;
}
<div class="container">
<div class="brandHeader">
<h1>My Header</h1>
</div>
<form class="formHolder">
<input type="text" id="search-bar" placeholder="Search">
</form>
</div>
我想要的是我的标题也与搜索栏同时向上移动 10px。
如果您需要我忘记提供的任何其他信息，请询问，我会发布。
纯 CSS 解决方案 - Flexbox Order
如果你能够稍微重组你的html，那么可以通过改变dom来实现input在 html 中排名第一，但在屏幕上排名第二。该方法使用flexboxorder这样做。
这是一个例子。
.container {
display: flex;
flex-direction: column;
}
input {
display: flex;
flex-direction: column;
order: 2;
}
.brandHeader {
display: flex;
order: 1;
transition: all 0.2s ease;
}
input:focus + .brandHeader {
margin-top: -10px;
}
<form class="container">
<input type="text" id="search-bar" placeholder="Search">
<div class="brandHeader">
<h1>My Header</h1>
</div>
</form>
fiddle
https://jsfiddle.net/Hastig/djj01x6e/
如果这对您有用，请告诉我，我会对此进行更多解释。
第二个纯 CSS 解决方案 - flex-direction: column-reverse
与第一个几乎相同，但不需要使用order: x;
.container {
display: flex;
flex-direction: column-reverse;
}
input {
display: flex;
flex-direction: column;
}
.brandHeader {
display: flex;
transition: all 0.2s ease;
}
input:focus + .brandHeader {
margin-top: -10px;
}
<form class="container">
<input type="text" id="search-bar" placeholder="Search">
<div class="brandHeader">
<h1>My Header</h1>
</div>
</form>
fiddle
https://jsfiddle.net/Hastig/djj01x6e/1/
你可以在没有flexbox的情况下使用position:absolute来完成类似的事情，以将输入保持在dom中第一，但在屏幕上第二，但这也取决于你是否能够改变html结构。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
