translate3d(x,y,z)在页面布局中的使用(底部内容的自动撑开并弹出)

#####很快,又到了月底,最近遇到了一个问题,弄了蛮久,做下总结,温故知新!!!

translate3d(x,y,z)在页面布局中的使用(底部内容的自动撑开并弹出)_第1张图片
这是饿了么的商家页面,底层的购物车页面(父层)是使用fixed布局的,固定在下方。购物车详情页(子层)默认显示,当点击父层的时候,子层就会展开。

-----------HTml代码

  
我是购物车层
---------------样式代码
.shopCart{
position: fixed;
      bottom:0;
      left: 0;
      width:100%;
      height:50px;
      background: #000;
    }
    .content {
      color: #fff;
    }
    .detail {
      position: absolute;
      top:0;
      left:0;
      width:120px;
      color: #ff0b20;
      /*transform: translate3d(0,-100%,0);*/   //后续添加
    }
  
--------------js代码

                    
                    

你可能感兴趣的:(布局,布局)