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/