博客

我的航线弹出框我是用了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; 就解决啦~~