如何让HTML图像重叠另一个 [英] How to let an HTML image overlap another

问题描述

<div class="mainRunner">
    <img src="../App_Themes/Default/images/a.gif" />
    <img src="../App_Themes/Default/images/b.gif" />
</div>

我想b.gif重叠a.gif，而不是一个新的行 - 实现这个？

I want b.gif to overlap a.gif rather than go on a new line - how can I achieve this?

推荐答案

你必须使用定位和z-index来使这个工作，并添加一个类：

You would have to use positioning and z-index to get this to work, with changing the images to block level elements and adding a class:

HTML：

<div class="mainRunner">
    <img class="img1" src="http://t0.gstatic.com/images?q=tbn:ANd9GcTG4mTuuZmylqn_qqviXFh5EPLD_DTsXMIjXT-4XJM0QPtJxw7lXw&t=1" />
    <img class="img2" src="http://t0.gstatic.com/images?q=tbn:ANd9GcTG4mTuuZmylqn_qqviXFh5EPLD_DTsXMIjXT-4XJM0QPtJxw7lXw&t=1" />
</div>

CSS：

.mainRunner
{
    border: 1px solid #000;
    position: relative;
}

.img1
{
    border: 1px solid #f00;
    position: relative;
    z-index: 2;
}

.img2
{
    border: 1px solid #0f0;
    position: relative;
    z-index: 1;
    top: -12px;
    left: 12px;
}

示例。

这篇关于如何让HTML图像重叠另一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！