css吧 关注：63,458贴子：458,660
- 2回复贴，共1页
我来结帖了。修改后的CSS和HTML代码如下图：
图1
图2
具体原理如下：
1、增加基准定位元素；
2、根据基准定位元素调整基准定位元素内部元素的偏移量。
相比较第一版CSS和HTML
图3
4个.rwdrow中除了第一个.rwdrow，其余3个的初始定位全部基于前一个.rwdrow。第一个.rwdrow的初始定位基于.rwdlist-container。根据CSS设置，当第一个.rwdrow向上偏移-10px时，其他第二个、第三个、第四个.rwdrow虽然调整了-10的偏移量，但他们在偏移之前，定位基准（也就是第一个rwdrow）已经发生了改变，所以第二、三、四个.rwdrow不会重叠压住上一个.rwdrow的底边。
解决办法就是，为这些.rwdrow创建“固定”的定位基准元素，如图2所示。
下图显示改造后的元素结构：
图4
图4中，黑色div是.rwdlist-container。蓝色div就是用来做定位基准的div（.rwdrow）。棕色div是.content，即.rwdrow内部的div，也是需要实际发生偏移的元素。
另外还要注意两点：
1、.rwdlist-container中的第一个.rwdrow元素中的.content不需要向上偏移，所以我们需要专门针对这个.content单独设置。
2、本例中，.rwdrow和.content行高都是120px。如果每个.content都向上偏移10px，那么，不会做出“下面一个.content叠压上面一个.content底边”的特效，所以要把.content的高度增加10px，这样，下面一个.content就可以叠压到上面一个.content底边10px的部分。
效果图如下：
图5
图1
图2
具体原理如下：
1、增加基准定位元素；
2、根据基准定位元素调整基准定位元素内部元素的偏移量。
相比较第一版CSS和HTML
图3
4个.rwdrow中除了第一个.rwdrow，其余3个的初始定位全部基于前一个.rwdrow。第一个.rwdrow的初始定位基于.rwdlist-container。根据CSS设置，当第一个.rwdrow向上偏移-10px时，其他第二个、第三个、第四个.rwdrow虽然调整了-10的偏移量，但他们在偏移之前，定位基准（也就是第一个rwdrow）已经发生了改变，所以第二、三、四个.rwdrow不会重叠压住上一个.rwdrow的底边。
解决办法就是，为这些.rwdrow创建“固定”的定位基准元素，如图2所示。
下图显示改造后的元素结构：
图4
图4中，黑色div是.rwdlist-container。蓝色div就是用来做定位基准的div（.rwdrow）。棕色div是.content，即.rwdrow内部的div，也是需要实际发生偏移的元素。
另外还要注意两点：
1、.rwdlist-container中的第一个.rwdrow元素中的.content不需要向上偏移，所以我们需要专门针对这个.content单独设置。
2、本例中，.rwdrow和.content行高都是120px。如果每个.content都向上偏移10px，那么，不会做出“下面一个.content叠压上面一个.content底边”的特效，所以要把.content的高度增加10px，这样，下面一个.content就可以叠压到上面一个.content底边10px的部分。
效果图如下：
图5
