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

最新推荐文章于 2022-08-02 15:06:32 发布

前端墨尘

最新推荐文章于 2022-08-02 15:06:32 发布

阅读量2.1w

点赞数 2

分类专栏：布局文章标签：布局

本文链接：https://blog.csdn.net/weixin_37219302/article/details/78403142

版权

布局专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

这里写图片描述
这是饿了么的商家页面，底层的购物车页面(父层)是使用fixed布局的，固定在下方。购物车详情页(子层)默认显示，当点击父层的时候，子层就会展开。

-----------HTml代码
<body>
  <div class="shopCart">
    <div class="content">我是购物车层</div>
    <div class="detail" style="display:none">我是购物车详情页（弹出层）
      1111111111111111111111111
      1111111111111111111111111
      1111111111111111111111111
      我是购物车详情页（弹出层）</div>
  </div>
</body>

---------------样式代码
.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);*/   //后续添加
    }
  </style>

--------------js代码
<script>
    window.onload = function(){
      var shopcart = document.querySelector('.shopCart');
      var detail = document.querySelector('.detail');
      shopcart.onclick = function(){
        detail.style.display='block';
      }
    }

1.在没有添加 transform: translate3d(0,-100%,0);的时候，效果如下，子层是以父层来定位的，也只能在父层内部显示。
2.添加了transform: translate3d(0,-100%,0);的时候，效果如下：子层就会超出父层区域
3.注意：(1)transform: translate3d(0,-100%,0);中的-100%，是为了让子元素以自身内容，往上撑开自己的文本内容。