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

如题

 <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上的文字”这段文字下面，求解啊啊啊啊

你的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>

使用父元素内的绝对定位，除非是 [b]top:length;[/b] 格式，否则都需要明确指定父元素高度。

<div style="position:relative;width:1000px;height:200px;">
    <span style="position:absolute;bottom:20px;">图片1111上的文字</span>
    <img style="width:1000px;height:200px;"/>
</div>
<div style="position:relative;width:1000px;height:200px;">
    <span style="position:absolute;top:80%;">图片2222上的文字</span>
    <img style="width:1000px;height:200px;"/>
</div>
<div style="position:relative;">
    <span style="position:absolute;top:160px;">图片333上的文字</span>
    <img style="width:1000px;height:200px;"/>
</div>