微信开发知识学习（一)

        HTML页面开发并不熟练的情况下坚持一周的开发学习了，总的来说，感觉自己越来越入门了，上篇文章介绍了自己对H5开发过程中的宏观把控，此次则针对一些细节问题进行讨论。

       

       1. 对于div的定位方式：absolute、position、static、fixed

absolute，官方解释：将对象从文档流中脱出，使用left，right，top，bottom等属性进行绝对定位。层叠通过css z-index属性定义。此对象不具边距，任由补白和边框。

       示例：

.div1{
width:100px;
height:100px;
background-color:red;
margin:2px;
position:static;
}
.div2{
width:100px;
height:100px;
background-color:green;
margin:2px;
position:absolute;
left:20px;
}
.div3{
width:100px;
height:100px;
background-color:blue;
margin:2px;
position:absolute;
}        效果图：
                  


        relative：对象不可层叠，依据left，right，top，bottom等属性在正常文档流中便宜自身位置，可以设置z-index分层设计。说白了，relative如果便宜自己原来的位置，任然占用空间大小，以下兄弟节点不能顶替上面的位置。

       示例：

       .div1{
width:100px;
height:100px;
background-color:red;
margin:2px;
position:static;
}
.div2{
width:100px;
height:100px;
background-color:green;
margin:2px;
position:relative;
left:200px;

}
.div3{
width:100px;
height:100px;
background-color:blue;
margin:2px;
position:absolute;

}        效果图：
                                 


          

         absolute与relative除了在文档流中占位置不同之外，定位方式也不同：

         示例：

          <div class="div4">
<div class="div2"></div>
<div class="div3"></div>
</div>       absolute相对于父节点的位置进行定位：
.div2{
width:100px;
height:100px;
background-color:green;
margin:2px;
position:relative;
left:200px;

}
.div3{
width:100px;
height:100px;
background-color:blue;
margin:2px;
position:absolute;
top:100px;
}
.div4{
width:200px;
height:200px;
background-color:#342232;
margin:2px;
position:relative;
left:200px;
top:200px;
}         效果图：
       


        relative相对于上一个能确定位置的元素进行定位：（将上面代码的div3的定位方式改成relative）

          


         设置浮动方式则图像不再占有文档流，底下元素移到上面占有该元素位置。  

.div2{
width:100px;
height:100px;
background-color:green;
margin:2px;
position:relative;
float:left;
left:20px;
}
.div3{
width:100px;
height:100px;
background-color:blue;
margin:2px;
position:relative;

}
        效果图：

             


       2. 透明度问题

          常规设置透明度的方式：opacity:0.4;但是存在一个问题，父级的div透明度也会影响到子级div，这种情况下采用另外一种设置透明度的方法：background-color: rgba(0,0,0,0.5)

       3. 滚动条存在情况下，实现弹出框位置不变

          $(function(){
$(window).scroll(function(){
var top =$(window).scrollTop();
$("#container6").animate({"top":top},30);
$("#container9").animate({"top":top},30);
$("#container5").animate({"top":top},30);
});
});

       总结：

            div的位置对于我这个初学者来说，刚开始是一个累赘，随着逐渐对它的深入了解，神秘面纱也逐渐浮出水面。