Question

我正在为旋转木马实现一个图像选择器：

结构如下：

一个<div>容器，带有一些水平填充物，以便为V形臂提供备用。
左侧V形臂的<div：position : absolute; left:0;
右侧V形臂的<div：position : absolute; right:0;
<div>以包含white-space: nowrap; overflow:hidden

问题：如果我不强迫top:0使用V形符号，我会得到以下结果：

有人可以解释原因吗？

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; */
}

Answer 1

我认为其他答案围绕着真正的问题，即你有两排堆叠的内容（幻灯片，下面是箭头）。你可以通过绝对定位来解决这个问题，但我认为将它们放在相同的水平行中会更加清晰。使用float的简单示例：

JSFiddle

Answer 2

绝对定位不需要'relative'元素（如上面的.box元素所设置）。如果绝对定位没有定位上下文的元素，则定位将相对于整个页面进行。（例外情况是，如果您未指定任何top，bottom，left或right值。在这种情况下，即使没有定位上下文，上下文也会自动成为直接容器元素，并且元素仍将处于流。）

因此，如果您没有为position: absolute的某个元素指定顶部或左侧位置，则根据它们在DOM中的正常位置来考虑这些位置。在你的情况下，他们在DOM中的正常位置处于最高位置。要放置一个绝对位置的元素，我们应该在大多数情况下明确提供这些属性以避免出现问题。

Answer 3

您提供了img-container position:absolute;和width:450px;

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;
  position: absolute;
  width: 450px;
}

.img-container li {
  display:inline-block;
}

.button-left {
  position: absolute;
  left: 0;
  /* top: 0; */
}

.button-right {
  position: absolute;
  right: 0;
  /* top: 0; */
}

<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>

绝对位置。强制上：0

3 个答案: