我试图过度定位两个图像,像这样
撕裂是 .png 图像
这是html结构
<div class="intertTa">
<div class="ta borderes ico">
<img src="...">
<img class="bad" src="/content/img/asesores/lagrima-asesor.png">
</div>
<div class="ta name"><span>Leonidas Segura</span></div>
<div class="ta sale"><span>1,100</span><small>Ventas</small></div>
<div class="ta price">
<div><span>34,000</span><small>mxn</small></div>
<div class="porcentajev">
<div class="hakogreenini">
<div class="item">1</div>
<div class="itemTotal">47,450 <small>mxn</small></div>
</div>
</div>
</div>
</div>
较少的
.ico {
width: 104px;
height: 104px;
img {
width: 104px;
height: 104px;
z-index: 0;
}
/*.rules {
margin: auto;
position: absolute;
z-index: 2;
width: 104px;
height: 104px;
left: 0;
right: 0;
top: 0;
bottom: 0;
}*/
.bad {
position: absolute;
z-index: 1;
width: 22px;
height: 25px;
bottom: 29px;
left: 100px;
}
}
但是在其他更基本的浏览器中显示它时,泪珠会上升并且不会留在原地
它或多或少地放置在蓝点所在的位置,我想知道如何在不使用 position: absolute 的情况下覆盖撕裂或我可以改进的地方,以便在非常基本的浏览器中不会发生这种情况
position
设置为时的属性absolute
将使用left
,top
和属性相对于其最近定位的祖先right
进行定位。bottom
该值
static
是所有 html 元素的默认值。这意味着当您放置absolute
元素时,它会查找html
DOM 树中的第一个元素的标记,该元素的值position
不是默认值,并相对于该元素定位自身。在您的情况下,据我所知,附近没有,因此它相对于作为 DOM 树根的视口进行定位。这张照片将帮助您更好地理解它。看一个奇怪的细节,它是相对元素的子元素的绝对元素相对于它进行定位,这可能是您的解决方案,因为未指定任何偏移量的相对元素将被定位但将保留在其place,与静态元素完全相同。写
你解决你的问题。请注意,这也可以改变您的布局,因为我不知道您的其他课程的内容,但这里有解决方案。指定一个容器,该容器是表中的一行,以便图像包含在每一行中。
您可以在此处检查此技术的兼容性,但如果您意识到 Internet Explorer 4 也能够处理它。