如何使div響應

Question

如何響應迅速地更改div的位置？

HTML：

<div class="icon">
    <i class="fa fa-search toggle_icon"></i>
</div>
<div class="sidenav">
<center>
<input id="provider-json" />
</center>
</div>

CSS：

.icon {
        position: absolute;
        top: 30%;
        left: 0;
        width: 50px;
        height: 50px;
        background: #d54042;
    }

    .sidenav {
        position: absolute;
        top: 30%;
        left: 52px;
        height: 50px;
        width: 200px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px; 
        background: #d54042;
        background: -webkit-linear-gradient(left, #D54042 , #D56769); 
        background: -o-linear-gradient(right, #D54042, #D56769);
        background: -moz-linear-gradient(right, #D54042, #D56769);
        background: linear-gradient(to right, #D54042 , #D56769);
    }

    #provider-json {
        margin-top: 6px;
        padding: 10px 5px;
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border:solid 1px #ccc;
        -moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2); 
        -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2); 
        box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
        outline-color: #d54042;
    }

    .toggle_icon {
        font-size: 2.5em;
        color: white;
        padding: 3px 3px 2px 5px;
    }       

我想垂直更改.icon和.sidenav的位置。 當我縮小屏幕時，它應該可以平穩地向上移動：0;

我嘗試了這個：

@media screen and (max-width: 480px) {
.icon, .sidenav {
    top: 5%;
}
}

但這僅在屏幕為480px寬時有效。

Answer 1

為了使smooth transition ，請使用以下css transition ，

@media screen and (max-width: 480px) {
.icon, .sidenav {
    top: 0;
    transition:0.6s ease; /*Add this*/
}
}

將屏幕分辨率低於480px; icons and search bar移到top 480px; ，請檢查此jsFiddle

Answer 2

根據您的問題“平穩地更改位置”，我給您一些relative和absolute位置的想法。

根據參考資料，“ Absolute位置是地圖上某個地方的准確點，而相對位置是該地方in relation to other landmarks.估計in relation to other landmarks. ”這意味着相對是將parent div into consideration但絕對是絕對絕對的。

 <div class="container">
         <div class="icon">
         <i class="fa fa-search toggle_icon"></i>
       </div>
      <div class="sidenav">
         <center>
         <input id="provider-json" />
         </center>
   </div>
</div>

現在，通過使容器保持relative位置而使容器保持absolute位置來優化代碼。 相對應該總是包裹絕對。 還可以從在線教程（例如w3schools）中獲得一些參考，並提供更好的示例。 您將被概念清除。