css - 堆叠背景：如何使其在另一个 div 下可见

Question

我有两个列 div，我正在为第二个 div 应用一个大背景，并将其背景位置向左移动。我希望它保持整体可见，而不是隐藏在第一个 div 下，同时避免使用负边距或其他有趣的业务。现在它因为溢出而被隐藏：当然是隐藏的......有什么想法吗？

这是示例http://tinkerbin.com/UqYLFKZG。

这是代码：

HTML：

<div class="left">
<ul>
  <li>one item</li>
  <li>one item</li>
  <li>one item</li>
  </ul>
</div>
<div class="middle">
<ul>
  <li>one item</li>
  <li>one item</li>
  <li>one item</li>
  </ul>
</div>

CSS

.left {float:left;width:100px;}
.middle {overflow:hidden;background:url("http://farm8.staticflickr.com/7116/8163983721_1ed2414765_b.jpg") no-repeat;background-position:-400px -200px;}

编辑：对反对票有点惊讶；确实，这个问题似乎太容易回答了，因为我在删除溢出时：隐藏，因为左侧不在文档的正常流程中，中间的内容与左侧的内容重叠..因此我需要添加一些左边距或填充来解决这个问题。

Answer 1

解决方案是删除 overflow:hidden 并添加 margin-left 或 padding left 等于 .left div 的大小，以便正确定位 .middle 。