为什么通过这种方式overflow:hidden的内容会显示出来

 <div class="slider">
        <div id="one" class="box"></div>
        <div id="two" class="box"></div>
        <div id="three" class="box"></div>
    </div>
    <nav>
        <a href="#one">One</a>
        <a href="#two">Two</a>
        <a href="#three">Three</a>
    </nav>
.box {
    width: 500px;
    height: 500px;
}

#one {
    background: red;
}

#two {
    background: green;
}

#three {
    background: #000;
}

.slider {
    width: 500px;
    height: 500px;
    overflow: hidden;
    margin: 30px auto;
    position: relative;
}