1

我正在制作自己的智能横幅，包括 js 代码在内的一切都运行良好。这个想法是，当用户在他们的移动设备上打开网站时，一个横幅会从顶部下拉，询问他/她是否想要下载。但是，当我的 smartbanner 从顶部下降时，它只是与下面的另一个 div 重叠，而不是向下推。这是我的CSS代码。下面的 div 是一个粘性标题，因此它的位置是固定的。

#smartbanner .smartbanner-button { 
        position:absolute; 
        right:20px; 
        top:24px; 
        border:1px solid #bfbfbf; 
        padding: 0 10px; 
        min-width: 10%; 
        height:24px; 
        font-size:14px; 
        line-height:24px; 
        text-align:center; 
        font-weight:bold; 
        color:white; 
    }
    #smartbanner { 
        position:absolute; 
        left:0;
        border-bottom:1px solid #e8e8e8; 
        width:100%; 
        height:78px;
        top: -80px;
        transition: top 300ms;
        opacity: 0.95;
        background: rgba(250,250,250,1);
        background: -moz-linear-gradient(-45deg, rgba(250,250,250,1) 0%, rgba(240,240,240,1) 47%, rgba(232,232,232,1) 100%);
        background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(250,250,250,1)), color-stop(47%, rgba(240,240,240,1)), color-stop(100%, rgba(232,232,232,1)));
        background: -webkit-linear-gradient(-45deg, rgba(250,250,250,1) 0%, rgba(240,240,240,1) 47%, rgba(232,232,232,1) 100%);
        background: -o-linear-gradient(-45deg, rgba(250,250,250,1) 0%, rgba(240,240,240,1) 47%, rgba(232,232,232,1) 100%);
        background: -ms-linear-gradient(-45deg, rgba(250,250,250,1) 0%, rgba(240,240,240,1) 47%, rgba(232,232,232,1) 100%);
        background: linear-gradient(135deg, rgba(250,250,250,1) 0%, rgba(240,240,240,1) 47%, rgba(232,232,232,1) 100%);
    }
    #smartbanner .smartbanner-close{
        margin-left: 0.1em;
        margin-top: 1.5em;
        font-size: 1em;
        background:none;
        border:none;
    }
    #smartbanner .smartbanner-logo { 
        position:absolute; 
        left:30px; 
        top:10px; 
        display:block; 
        width:57px; 
        height:57px; 
        background:rgba(0,0,0,0.6);
        background-size:cover; 
        border-radius:10px; 
        box-shadow:0 1px 3px rgba(0,0,0,0.3); 
    }
    #smartbanner .smartbanner-info { 
        position:absolute; 
        left:103px; 
        top:10px; 
        width:44%; 
        font-size:11px;
        line-height:0.2em;
        font-weight:bold;
        color:#6a6a6a;
        text-shadow:0 1px 0 rgba(255,255,255,0.8); 
    }
    #smartbanner .smartbanner-price { 
        position:absolute; 
        left:103px; 
        top:30px; 
        width:44%; 
        font-size:11px;
        line-height:0.2em;
        font-weight:bold;
        color:#6a6a6a;
        text-shadow:0 1px 0 rgba(255,255,255,0.8); 
    }
    #smartbanner .smartbanner-info strong {
        display:block; 
        font-size:13px;
        color:#4d4d4d; 
        line-height: 18px; 
    }
    #smartbanner .smartbanner-input {
        background:none;
        border:none;
    }
4

0 回答 0