使用 CSS 的横幅顶部的响应按钮

Question

我正在开发一个网站，我正在使用 wordpress/重新设计以提高响应速度。现在我的横幅顶部有一个按钮，它看起来非常漂亮，但是当我缩小窗口时，它会被推下并最终消失。我希望它看起来像下面的插图，其中按钮缓慢向下移动，并且可能会调整大小以使其变小，当它一直缩小时，它最终位于横幅的底部边缘。看图：

这是我的代码，我希望“get-order”类（按钮）能够响应并向下移动。我对响应式设计有点陌生，有什么建议吗？我注意到我正在处理的网站有一些媒体查询，所以我认为这是我应该使用的，我只是不知道正确和最有效的 CSS 方法来做到这一点。

<header id="masthead" class="site-header" role="banner">
<!--header-->
<div id="header">
<div class="wrap top-wrapper">
    <div class="menu" id="nav-wrap">

        <div class="menu-top-menu-container">
            <ul id="nav-wrap" class="nav">
                <li id="menu-item-23" class="menu-item menu-item-type-post_type   menu-item-object-page current-menu-item page_item page-item-5 current_page_item menu-item-23"><a href="example.com/"></a></li>
                <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="example.com/products/">Products</a></li>
                <li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="example.com/become/">Become a member</a></li>
                <li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="example.com/the-blog/">Blog</a></li>
                <li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19"><a href="example.com/about-us/">About us</a></li>
                <li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="example.com/contact-us/">Contact Us</a></li>
            </ul>
        </div>  
    </div>

    <div class="logo">
        <a href="example.com">
            <img src="http://example.com/images/logo.png" alt=""/>
        </a>
    </div>

     <a href="#" class="get-order" title="derp"></a>
   </div>
   <div class="banner">
    <img src="example.com/images/banner_img.jpg" alt="" />
   </div>
</div>
<!--header/-->
</header><!-- #masthead -->




#header{ 
width:100%;
height:560px;
overflow:hidden;
z-index:99;
position:relative;
margin:0px;
padding:0px;
}

.wrap {
height: auto;
margin: 0 auto;
padding: 0;
position: relative;
width: 955px;
z-index: 999;
}

.menu {
background: url("../../../images/nav-bg.jpg") repeat-x scroll left center rgba(0, 0, 0, 0);
min-height: 60px;
position: absolute;
top: 0;
width: 100%;
z-index: 999;
}

.nav {
margin: 0;
padding: 20px 0 0 67px;
}

.nav li {
display: inline-block;
float: left;
}

* {
margin: 0;
padding: 0;
}


.get-order {
 background-image: url("/images/b.png");
 height: 98px;
 left: 330px;
 position: absolute;
 top: 230px;
 width: 400px;
 z-index: 9;
}


.banner {
background-color: #060a0b;
display: inline-flex;
height: auto;
left: 0;
position: absolute;
text-align: center;
top: 0;
width: 100%;
z-index: 9;
}


@media screen and (max-width: 768px){

.wrap,.wrap-2,.wrap-3,.wrap-4{ width:750px;}
.nav li a{padding:0 18px 0 0;}
#header{ height:310px;}
.nav{ padding: 20px 0 0 33px;}
.nav li a{padding: 0 16px 0 0;}
.banner{display:inherit;}
}


@media screen and (max-width: 767px){

.wrap,.wrap-2,.wrap-3,.wrap-4{width:96%;}

.top-wrapper{ width:100%;}
.top-content{margin-top:20px;}

#menu-icon {
    color: #fff;        
    height: 30px;
    padding: 10px 20px 10px 10px;
    cursor: pointer;
    display: block;
    background:url(../../../images/arrow3.png) no-repeat  95% 40% #161677;
    line-height:28px;
    font-family:'Roboto Slab',serif;
}


#navigation {
    clear: both;
    /*position: absolute;*/
    top: 49px;
    /*width: 230px;*/
    width:100%;
    z-index: 9999;
    padding: 0px;
    display: none;
    position:absolute;
}

ul#nav-wrap{ display:none;}
.menu{ min-height:inherit;}
.nav{background:#f1f1f4;}
.nav li{ display:block; padding:5px 10px; float:none; background:none; border-top:1px solid #555559;  }
.nav li a{ color:#161677; font-size:14px;}
.nav li a.active, .nav li a:hover{ color:#303031;}
#header{ height:auto;}
.menu{position:inherit;}
.banner{ position:inherit;}
.wrap h1{padding-bottom:10px;}
.nav{ padding:0;}
}

@media screen and (min-width:320px){
.wrapper{ width:86%;}
}

Answer 1

在您的媒体查询中使用 css 底部功能，即

@media screen and (min-width:320px){
    .get-order {
      bottom: 0;
      height: x;
      left: x;
      width: x;
   }
}