盒子模型大家都做前端应该都很熟练了，我们的CSS 属性 全部都是以浏览器 为基本的 盒子模型对象 ，大多数属性都是遵循父级属性 传递 给子级，子级的css 属性基本 都会受父级影响和 限制 只有极少数属性是 子级影响父级，但是 都可以轻松 解决。 现在一个很久的问题全网基本搜 不到解决 子元素 用了position: fixed;bottom: 0;没法 指定在父级内部，都是以浏览器为盒子模型为基础 定位在 浏览器底部，在现在的跨平台项目中 就会出现一个问题，我想要的悬浮 是 在页面底部悬浮，而不是 悬浮在手机屏幕底部 。因为跨平台的网页开发 其实是套了很多层div 当我们用fixed 时我们的元素还是基于 手机屏幕 而不是这些平台封装的 层级 导致老飘出去。
使用transform: scale(1);改变一下 我们页面的平面 属性，让该平面内的所有元素都以这个元素为盒子模型为基础，
这样就可以解决 fixed元素 脱离 父级元素的问题
上简单粗暴代码
<html lang="en">
<body style="background:red;">
<div style="width:100%;height:70%;background:#000;transform: scale(1);">
<div style="width:100px;height:100px;background:#fff;position: fixed;bottom: 0;"></div>
</div>
</body>
</html>
网友评论