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

2个回答

你的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>
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问