2 amosway Amosway 于 2017.01.05 11:47 提问

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个回答

showbo
showbo   Ds   Rxr 2017.01.05 13:46

你的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>
Tiger_Zhao
Tiger_Zhao   Rxr 2017.01.05 13:52

使用父元素内的绝对定位,除非是 [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
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!