固定定位遇到错误

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


今天写了移动端的京东首页页面,再写固定定位的时候发现他不是按照设置的最大距离和最小距离显示的


提示:以下是本篇文章正文内容,下面案例可供参考

一、固定定位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;

在这里插入图片描述

这是修改的代码

总结

加上最大距离,最小距离,控制大小,还有定位的位置,在以后写代码中遇到错误应该
  1. 先看自己使用的属性标签写对没(拼写)
  2. 在使用精准单位时有没有加单位px(尤其是这里之前是0后来改成需要值的地方)
  3. 明确记住每个标签属性的使用范围,还有参照物
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值