移动端fixed定位时,使用width:100%会超出屏幕宽度

  • Post author:
  • Post category:其他


我的航线弹出框我是用了fixed定位,然后出现了下面这种情况,我的航线并没有垂直水平居中。

在这里插入图片描述

代码如下:

.route-modal {
  position: fixed; // 固定定位
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 998;
  .my-route {
    background: #fff;
    border-radius: 10px;
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

position: fixed; 的元素是相对于视口定位的,这意味着即使滚动页面,它也始终位于同一位置。 top、right、bottom和 left 属性用于定位此元素。

检查元素发现,设置了宽度100%。但是宽度缺超出了屏幕

在这里插入图片描述

检查了外层元素,发现宽度并没有超出

在这里插入图片描述

解决,给外层元素加overflow: hidden; 就解决啦~~

在这里插入图片描述



版权声明:本文为weixin_46074961原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。