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