html - 调整大小时 Div 不在点上

Question

每当我调整窗口大小时，圆圈就会完全错位，即使它们都是相对于同一个窗口的。这是为什么？它们以相同的方式定位，大小以 % 表示。非常感谢任何帮助。

HTML:

<div id="product-right">
    <div id="circle-container">
        <div id="circle-1" class="circle" onclick="changeparagraph1()"></div>
        <div id="circle-2" class="circle" onclick="changeparagraph2()"></div>
        <div id="circle-3" class="circle" onclick="changeparagraph3()"></div>
        <div id="circle-4" class="circle" onclick="changeparagraph4()"></div>
        <div id="circle-5" class="circle" onclick="changeparagraph5()"></div>
        <div id="circle-6" class="circle" onclick="changeparagraph6()"></div>
        <div id="circle-7" class="circle" onclick="changeparagraph7()"></div>
        <div id="circle-8" class="circle" onclick="changeparagraph8()"></div>
        <img src="img/gun.svg" alt="gun">
    </div>
</div>

CSS:

#product #product-right {
    height:100%;
    line-height:100%;
    float:left;
    width:50%;
    position:relative;
}

#product-right img {
    height:100%;
    width:100%;
    display:block;
    margin:0 auto 0 auto;
    pointer-events: none;
}

#circle-container {
    height:80%;
    width:80%;
    position:relative;
    margin:3vw 10% 0 10%;
    overflow:hidden;
}

.circle {
    position: absolute;
    cursor: pointer;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color:#666666;
    border: 5px solid transparent;
    box-shadow: 0 0 0 1px #666666;
    background-clip: padding-box;
}

#circle-1 {
    top:5vw;
    right:7vw;
}

#circle-2 {
    top:22.5%;
    right:27.5%;
}

#circle-3 {
    top:22.5%;
    right:22.5%;
}

#circle-4 {
    top:31%;
    left:37.5%;
}

#circle-5 {
    top:22.5%;
    right:17.5%;
}

#circle-6 {
    top:50%;
    left:32.5%;
}

#circle-7 {
    top:82%;
    left:24%;
}

#circle-8 {
    top:9%;
    left:28%;
}

Answer 1

删除不需要的 CSS

 <div id="product-right">
        <div id="circle-container">
        <table>
          <tr>
          <td>
            <div id="circle-1" class="circle" onclick="changeparagraph1()"></div></td>
          <td>
            <div id="circle-2" class="circle" onclick="changeparagraph2()"></div></td>
          <td>
            <div id="circle-3" class="circle" onclick="changeparagraph3()"></div></td>
          <td>
            <div id="circle-4" class="circle" onclick="changeparagraph4()"></div></td>
          </tr>
        </table>
        </div>
    </div>