css - 与网格 960 重叠的 div 布局

Question

我将 960 css 网格文件用于 Web 布局，效果很好，但对于此布局，我需要重叠 div。

如果我有 2 列并排，我可以通过在右侧设置 class="pull_1"来重叠左侧。

<div class="grid_2">
    <p>
     <img src="../star.jpg" width="236" height="329" style="float:left;">
    </p>
  </div>

<div class="grid_2 pull_1">
    <p>
     <img src="../star.jpg" width="236" height="329" style="float:left;">
    </p>
  </div>

但是如果我想向上重叠呢？是的，我可以设置 margin-top:-50px;那会重叠向左和向上。

<div class="grid_2">
    <p>
     <img src="../star.jpg" width="236" height="329" style="float:left;">
    </p>
  </div>

<div class="grid_2 pull_1" style="margin-top:-50px;">
    <p>
     <img src="../star.jpg" width="236" height="329" style="float:left;">
    </p>
  </div>

我想要一个像这样的布局，我只是想知道这是否是实现它的方法，或者是否有人有更好的方法来实现它？ 谢谢!

Answer 1

如果你给所有的 div 一个 CSS 规则:position:absolute，然后你可以将 top 和 left 位置偏移设置为创建一个类似于您发布的照片​​中的布局。如果您希望获得正确的分层，请确保 div 从后到前排序..

这是一个非常简单的示例，说明您可以使用 absolute 定位做什么: http://jsfiddle.net/ZqRgj/1/