#####很快,又到了月底,最近遇到了一个问题,弄了蛮久,做下总结,温故知新!!!
这是饿了么的商家页面,底层的购物车页面(父层)是使用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%,是为了让子元素以自身内容,往上撑开自己的文本内容。
好了,就这么多了,希望对小伙伴们有用!!2017.10.31