CSS代码:
position: fixed;bottom: 0;z-index: 100

1、position: fixed 相对定位的元素,相关于浏览器窗口进行定位。元素(例如DIV)的位子经由 "left", "top", "right" 以及 "bottom" 属性发展规定。
2、bottom: 0 ——设置对象距离底边为0,定位在浏览器底部。
3、z-index: 100——浮动值为100,如果网页另有绝对定位有浮动为90,那么100将浮动最基层。

实例CSS代码:

.box_btn{position: fixed;bottom: 0;left:0;z-index:100;width:100%;height:80px}

.box_btn a{display:block;border-radius:3px;height:60px; width:90%;margin:0 auto;line-height:60px;font-size:18px;color: #fff;background:#ff425a;text-align: center;}

.container { position: relative; } / 设置相对定位 /
.footer { position: absolute; bottom: 0; width: 100%; text-align: center; padding: 1px; } / 设置绝对定位 /

<div class="topRight">
         <a class="layui-btn" href="javascript:;" style="float:right;">右上角</a>
    </div>
    <div class="topLeft">
         <a class="layui-btn" href="javascript:;" style="float:right;">左上角</a>
    </div>
    <div class="bottomRight">
         <a class="layui-btn" href="javascript:;" style="float:right;">右下角</a>
    </div>
    <div class="bottomLeft">
         <a class="layui-btn" href="javascript:;" style="float:right;">左下角</a>
    </div>
    <div class="center">
         <a class="layui-btn" href="javascript:;" style="float:right;">当中央</a>
    </div>

</div>

<style type="text/css">
    /*DIV样式*/
    div{
    overflow:hidden;
    z-index:9999;
        width:100%;
        height:50px;
        border:0px;
        padding:5px 5px 5px 50px;
        position:fixed;
    }
    /*右上角*/
    .topRight{
        top:0;
        right:0;
    }
    /*左上角*/
    .topLeft{
        top:0;
        left:0;
    }
    /*右下角*/
    .bottomRight{
        bottom:0px;
        right:0px;
    }
    /*左下角*/
    .bottomLeft{
        bottom:0px;
        right:0px;
    }
    /*屏幕中间,实际应用中留出DIV的大小来*/
    .center{
        right:50%;
        top: 50%;
    }
</style>

标签: none

添加新评论