微信开发知识学习（一)

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