网站建设中图层定位技术

铭盾网络经验之谈 发布时间:2019-11-26

网站建设中常常遇到定位问题,下面对一些经常运用到的网站建设定位技术进行说明:

1、某版块一直在网站底部滚动

代码如下:
<style>
.b{z-index:20;
position:fixed;
width:100%;
height:59px;
bottom:0px;
overflow:visible;
_position:absolute;}
</style>
<div class=b>内容</div>

2、像一些在线客服在右边悬挂:

代码如下:
<style>
.kefu {
    background-color: #ca1f1f;
    border: 2px solid #fff;
    position: fixed;
    width: 80px;
    top: 138px;
    right: 20px;
    text-align: center;
    display: block;
    -webkit-box-shadow: 0 0px 12px rgba(0, 0, 0, 0.1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-size: 12px;
    z-index:1000;
}
</style>

代码:
<div class="kefu">内容 </div>

3、两个图层间一个图层在另一个图层某位置



样式如下:
<style>
.login_list2 {
 width:492px; height:460px; margin:0 auto;z-index:104;  margin-top:120px; z-index:104; background-color:#FFFFFF;border-radius: 6px;}
.login_list2  .close { width:492px; height:10px;position:relative; right:0px; top:0}
</style>
代码发如下:
<article class="login_list2">  

<div class="close"><img src="/images/buy_12.png" width="40" height="40" alt="" onclick="sAndH('#mima_login','')"></div>//关闭按钮
            
  </article>

转载请标注:重庆网站建设公司铭盾信息http://www.cqweb.org/jingyanzhitan/20.html,建站电话:15320293856