提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
写京东移动端首页遇到问题
今天写了移动端的京东首页页面,再写固定定位的时候发现他不是按照设置的最大距离和最小距离显示的
提示:以下是本篇文章正文内容,下面案例可供参考
一、固定定位fixed
- 完全脱标,不占位置
- 只认浏览器的可视窗口
跟父元素没有关系(很重要)
二、遇到问题即解决
- 定位没有按照写的最大距离里面显示
- 原因是固定定位是以浏览器视口做参照物,不是父元素
- 现在要做的就是改变他自己自身定位位置,及大小控制
方法一
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
min-width: 320px;
max-width: 640px;
方法二
不加向左的偏移量
position: fixed;
top: 0;
min-width: 320px;
max-width: 640px;
这是修改的代码
总结
加上最大距离,最小距离,控制大小,还有定位的位置,在以后写代码中遇到错误应该- 先看自己使用的属性标签写对没(拼写)
- 在使用精准单位时有没有加单位px(尤其是这里之前是0后来改成需要值的地方)
- 明确记住每个标签属性的使用范围,还有参照物