绝对位置。力顶：0

Arnaud Denoyelle 发表于 Dev

Arnaud Denoyelle

我正在为轮播实现图片选择器：

结构如下：

一个<div>带有一些水平填充物的容器，用于放置人字形的备用空间。
A<div表示左侧的V形符号：position : absolute; left:0;
A<div代表右侧的V形：position : absolute; right:0;
一个<div>包含图像white-space: nowrap; overflow:hidden

问题：如果我不top:0踩人字形，就会得到以下结果：

有人可以解释为什么吗？

这是JSFiddle

HTML：

<div class="container">
    <div class="img-container">
        <ul>
            <li><img src="http://placehold.it/150x100/EEE04A/ffffff?text=Image%201">
            </li><li><img src="http://placehold.it/150x100/5cb85c/ffffff?text=Image%202">
        </li><li><img src="http://placehold.it/150x100/5bc0de/ffffff?text=Image%203">
        </li><li><img src="http://placehold.it/150x100/f0ad4e/ffffff?text=Image%204">
        </li><li><img src="http://placehold.it/150x100/FF3167/ffffff?text=Image%205"></li>
        </ul>
    </div>
    <div class="button-left">
        <img src="http://placehold.it/50x100/cccccc/ffffff?text=<">
    </div>
    <div class="button-right">
        <img src="http://placehold.it/50x100/cccccc/ffffff?text=>">
    </div>
</div>

CSS：

ul {
    padding-left: 0;
    margin: 0;
    list-style:none;
}

.container {
    width: 450px;
    padding: 0 50px 0 50px;
    position: relative;
}

.img-container {
    overflow:hidden;
    white-space: nowrap;
}

.img-container li {
    display:inline-block;
}

.button-left {
    position: absolute;
    left: 0;
    /* top: 0; */
}

.button-right {
    position: absolute;
    right: 0;
    /* top: 0; */
}