我也遇到了定位问题,有没有大师能指点一二?
css吧
全部回复
仅看楼主
level 7
rickqin 楼主
我有如下元素结构:
我希望每个.rwdrow都能向上盖住上一个.rwdrow的底边。如下图√的地方。但是下图中?的地方却没有如我预期的那样改变。请问,怎样才能使他们相互重叠一些呢?
2017年12月01日 04点12分 1
level 7
rickqin 楼主
我大概知道怎么弄了,等我试成功了,过来结贴。
2017年12月01日 04点12分 2
level 7
rickqin 楼主
我来结帖了。修改后的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
2017年12月01日 06点12分 3
1