css 两个相邻的reltive 下absolute受影响的问题

Question

如题

 <div style="position:relative">
        <span style="position:absolute;bottom:10%;">图片1111上的文字</span>
        <img style="width:100%"/>
 </div>
 <div style="position:relative">
        <span style="position:absolute;bottom:10%;">图片2222上的文字</span>
        <img style="width:100%"/>
 </div>

在上诉的代码实现中，第一个relative下的“图片1111上的文字”这段文字会直接收到第二个relative的影响，被覆盖到了“图片2222上的文字”这段文字下面，求解啊啊啊啊

Answer 1

你的div高度都没有，那不是重叠了。。

 <div style="position:relative;width:200px">
    <span style="position:absolute;bottom:10%;">图片1111上的文字</span>
    <img style="width:100%" src="http://avatar.csdn.net/8/6/A/2_amosway.jpg" />
</div>
<div style="position: relative; width: 200px; ">
    <span style="position:absolute;bottom:10%;">图片2222上的文字</span>
    <img style="width:100%" src="http://avatar.csdn.net/8/6/A/2_amosway.jpg" />
</div>