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*/
}
}

此屏幕分辨率icons and search bar下top移至480px;，请查看此jsFiddle

Answer 2

根据您的问题＆＃34;顺利更改地点＆＃34;我想了解relative和absolute定位。

根据参考＆＃34; Absolute地点是地图上某个地点的确切位置，而相对位置是地点in relation to other landmarks.＆＃34;这意味着亲戚需要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等在线教程中获得一些参考，并提供更好的示例。您将被概念清理。

如何使div响应

2 个答案: