입력에 초점이 맞춰지면 상위 div에 애니메이션 적용

Question

누군가가 입력 상자를 클릭하면 화면 상단으로 올라갑니다. 이 작업을 수행 할 수 있지만 부모 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을 이동하는 내 헤더입니다.

제공하는 것을 잊어 버린 추가 정보가 필요한 경우 요청하여 게시 할 것입니다.

Answer 1

에 순수 CSS의 솔루션 전환을 추가 할 수 있습니다 - 당신이 구조 조정을 할 수있는 경우 인 flexbox 주문

을 당신의 HTML은 약간 변경 가능하므로 DOM을 변경하면 input은 html에서는 1 위가되지만 화면에서는 2nd가됩니다. 이 방법은 flexbox order을 사용합니다.

다음은 예입니다.

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

당신이 저에게 알려 주시면 그것에 대해 더 설명하겠습니다을 위해 그 일을한다면 바이올린.

---

제 2의 순수 CSS의 솔루션 - 플렉스 방향 : 열 - 반전을 꽤 많이

첫 번째하지만 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>

를 사용할 필요가 없습니다와 같은

바이올렛

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

---

당신은 위치를 사용하여 인 flexbox없이 비슷한 일을 수행 할 수 화면에 DOM하지만 2에 입력 1을 유지하는 절대하지만 너무 당신의 HTML 구조를 변경 할 수있는에 따라 달라집니다.

Answer 2

당신은 전환 할 수 있습니다 또는 jQuery로 input:focus에 brandHeader에 addClass는, 당신은 모두 h1 및 input