给body添加 overflow: hidden; 可以将页面所有的 滚动条隐藏，但必须要给body 设置一个高度

overflow: hidden;height:864px;

父元素必须要设置 position:relative

     必须设置 width 与 height 且不能用百分比

     父层如果是图片，要使用  background: url(bg.jpg) no-repeat;

     

子元素必须设置 position: absolute;

     必须设置 width 与 height

     定位使用 top left buttom right

     使用百分比子元素容易飞掉

 

实例：

      
     
            
       
          
                  
             
       
      
/**结构说明*  最外层 warp*  sub-warp 是相对于 .first-img 绝对定位的，因此 sub-warp 必须是绝对定位且它的大小要和 .first-img 一样大小*  子层 .sub-two  /  .sub-three  是相对于 sub-warp 进行绝对定位，值用百分比就可以，如果这里是相对定位，在某些手机上会出问题*/

.warp {
         position:relative; /*最外层是相对定位*/}.warp img {
         //正常设置图片的格式就可以}.sub-warp {
         position:absolute;/*所有的子层都是绝对定位*/     top:0;     left:0;     right:0;     bottom:0;}.sub-warp img::nth-child(1){
         position:absolute;     top:22%;     left:5%;}.sub-warp img:nth-child(2){
         position:absolute;     top:15%;     left:22%;}

如果子元素在父元素的一定范围内成比例缩放且居中显示，因此left:50%，需要用到一个定宽的值及一个margin-left的值与50%定位，top根据实际情况重新调整：

@media (max-width: 768px) {
         .sub-warp img:nth-child(2){          position:absolute;          top:15%;          left:50%;          width:290px;          margin-left:-176px;     }}

为了解决撑破容器的问题，以前我们只能去计算div.box的宽度，用容器宽度减去padding和border的值，但有时候，我们苦于不知道元素的总宽度，比如说是自适应的布局，只知道一个百分值，但其他的值又是px之类的值，这就是难点，死卡住了。随着CSS3的出现，其中利用box-sizing来改变元素的盒模型类型实使实现效果，但今天我们学习的calc()方法更是方便，可以使用 calc()计算，calc()可以用在大尺寸在小屏幕上.

使用方法 ：知道总宽度是100%，在这个基础上减去boder的宽度（5px * 2 = 10px）,在减去padding的宽度（10px * 2 = 20px），即"100% - (10px + 5px) * 2 = 30px" ，最终得到的值就是div.box的width值。width: 90%;/*写给不支持calc()的浏览器*/width:-moz-calc(100% - (10px + 5px) * 2);width:-webkit-calc(100% - (10px + 5px) * 2);width: calc(100% - (10px + 5px) * 2);

- 主容器的宽度是“100% - 20px * 2”,并且水平居中：.wrapper {
      width: 1024px; /*写给不支持calc()的浏览器*/  width: -moz-calc(100% - 40px);  width: -webkit-calc(100% - 40px);  width: calc(100% - 40px);  margin: auto;}

欢迎一起讨论！