◆ 问题描述

使用swiper时，如下图，发现导航按钮在【区域2】中，而不是预期中【区域1】居中位置。

◆ 问题分析

看下我的html代码，导航按钮的div标签也设置没问题。

        <div class="mySwiper4-2">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><h2>Slide 1</h2></div>
                <div class="swiper-slide"><h2>Slide 2</h2></div>
                <div class="swiper-slide"><h2>Slide 3</h2></div>
                <div class="swiper-slide"><h2>Slide 4</h2></div>
                <div class="swiper-slide"><h2>Slide 5</h2></div>
                <div class="swiper-slide"><h2>Slide 6</h2></div>
                <div class="swiper-slide"><h2>Slide 7</h2></div>
                <div class="swiper-slide"><h2>Slide 8</h2></div>
                <div class="swiper-slide"><h2>Slide 9</h2></div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>

仔细观察导航样式，发现position默认设置absolute绝对定位，如下代码：

.swiper-button-next,.swiper-button-prev {
    position: absolute;
    top: var(--swiper-navigation-top-offset,50%);
    width: calc(var(--swiper-navigation-size)/ 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - (var(--swiper-navigation-size)/ 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* color:var(--swiper-navigation-color,var(--swiper-theme-color)); */
}

依 CSS知识： position: absolute; 会使元素脱离正常的文档流，并且它的定位是相对于最近的已定位（position 值不为 static，如 relative、absolute、fixed 或 sticky）祖先元素。如果直接父元素的 position 属性值为 static（这是默认值），那么子元素会继续向上查找具有定位属性的祖先元素，直到找到最近的已定位祖先元素为止，并相对于该祖先元素进行定位。

如上图，由于我直接父元素没有设置position，所以继续找到其祖先元素<div id=”swiperHistory”>，就按这个区域定位导航按钮了。其导航位置也在这个【区域3】中间。

◆ 问题解决

定位到原因，所以把导航按钮修改成符合预期效果，只要在父元素设置position为相对定位即可。修改代码如下：

<div class="mySwiper4-2" style="position: relative">

再次测试，如上图所示，导航按钮符合预期效果了。