純html+css的輪播圖問題

html：

<div class="slide">
    <div id="slide1" class="slide-content"></div>
    <div id="slide2" class="slide-content"></div>
    <div id="slide3" class="slide-content"></div>
    <div class="btns">
        <a href="#slide1" class="btn">1</a>
        <a href="#slide2" class="btn">2</a>
        <a href="#slide3" class="btn">3</a>
    </div>
</div>

css：

.slide{
    width: 200px;
    height: 80px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    background-color: #f00;
}
.slide-content{
    width: 100%;
    height: 100%;
    position: absolute;
    right: -100%;
    top: 0;
    animation: slider-out 0.5s linear;
}
.slide-content:target{
    right: 0%;
    animation: slider-in 0.5s linear;
}
@keyframes slider-out{
    from{
        right: 0%;
    }
    to{
        right: -100%;
    }
}
@keyframes slider-in{
    from{
        right: 100%;
    }
    to{
        right: 0%;
    }
}
#slide1{
    background-color: #f00;
}
#slide2{
    background-color: #0f0;
}
#slide3{
    background-color: #00f;
}
.btns{
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 100;
}
.btn{
    float: left;
    margin-left: 10px;
    display: block;
    text-align: center;
    text-decoration: none;
    width: 20px;
    line-height: 20px;
    opacity: 0.6;
    color: #fff;
    background-color: #b7b7b7;
}

想達到的效果是點擊按鈕后，對應的slide塊由左往右滑動出現(xiàn)。

調(diào)試發(fā)現(xiàn)：

單擊按鈕后，所點按鈕對應的slide塊的顯示效果沒有按預期地變化，但其right屬性和預期是一樣的，與顯示效果不符？
按鈕部分會很奇怪地跑到右邊去，我的理解是按鈕明明是position:absolute的，應該基于父元素div.slide定位，為什么會和它兄弟元素一起移動所以理解不能~
將 slide-content元素的屬性改為 right:100%后，完美運行，為什么？測試了一下animation配合@keyframes的動畫，即使0%時的屬性與元素本身屬性不符，動畫也會正常按流程運行，只是有個突變的效果，為什么此處行不通？

請各位指教！謝謝~！

回答

編輯回答

瘋子范

效果JSFiddle

加了一層 slide-wrapper 把底下的指示器和 slide 卡片隔離開了，讓 slide-wrapper 來 overflow: hidden.

原因是卡片橫向排放，導致溢出，雖然使用了 overflow: hidden, 但是改變不了 .slide 的 scrollWidth 還是 3 倍的卡片寬度的事實， position absolute 確實是不可能受同為 absolute 的兄弟元素的影響，但是由于 .slide 容器本身存在內(nèi)容溢出，其實應該會出現(xiàn)滾動條的，只不過我們用 css 禁用了滾動條。a 鏈接的錨點定位元素，有一個功效是會把不在顯示區(qū)域的內(nèi)容通過拖動滾動條的方式 scroll 到可視區(qū)域。 盡管我們禁用了滾動條，但是這個滾動元素的功能還在，不信你去嘗試取一下 .slide DOM 的 scrollLeft 值打印出來看看，或者去掉 overflow:hidden 看看點擊錨點滾動條是不是移動了。所以，這就是底下的指示器跑到看不見的左邊去了的原因。

============== 更新 ================