堆叠背景：如何使其在另一个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

解决方法是删除溢出：隐藏并添加左边距或填充左边等于.left div的大小，以便正确定位.middle。