html – 聚焦输入时的动画父div

我试图这样做,当有人点击输入框时,它会上升到屏幕顶部.我能够完成这项工作,但我不能在父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订单

如果你能够通过改变dom来重构你的html,那么输入在html中是第1位,但在屏幕上是第2位.此方法使用flexBox命令执行此操作.

这是一个例子.

.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>

小提琴

https://jsfiddle.net/Hastig/djj01x6e/

如果这对你有用,请告诉我,我会解释更多.

第二个纯CSS解决方案 – flex-direction：column-reverse

几乎与第一个相同但不需要使用顺序：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>

小提琴

https://jsfiddle.net/Hastig/djj01x6e/1/

你可以在没有flexBox的情况下使用position来执行类似的操作：绝对保持输入第一个在dom但第二个在屏幕上,但它也取决于你能够改变html结构.