Html 如何使用CSS定位此图像，使其与div重叠，但以内联方式显示？

我有一个图像，我正试图显示一个捐赠按钮内联，但我希望它重叠的div它所包含的

目前，图像不会显示；它所包围的框中有display:table：

当我在Firebug中阻止display:inline时，图像显示在捐赠按钮上方

我使用的代码（基于建议和使用W3学校）是：

以下是我在Photoshop中模拟的效果，我正试图实现：

阿凡达和箭头只是一个名为“featureme.png”的图像。但我只是不确定如何实现我想要的。spt_newpay_button类中除了按钮的不同颜色选项之外没有其他内容

我真的希望这可以在不使用jquery的情况下实现，而只是使用CSS

任何指导都将不胜感激

---

谢谢

直接在您的页面中尝试这段代码：

<div alt="outer image" style="position:relative;width=741px;height:92px;border:0px;
background: url('http://web-asylum.com/help-images/_tmp1.jpg') no-repeat;">

  <a href="https://nationalcdp.org/wp-content/plugins/stripe_payment_terminal/terminal/index.php" 
style="position:absolute;left:590px;width=138px;height:65px;border:0px;margin:10px 5px;">

  <img src="http://web-asylum.com/help-images/_tmp2.jpg" alt="right button"></a>
  <img src="https://nationalcdp.org/wp-content/uploads/2014/09/feature-me.png" alt="Cartoon"
style="position:absolute;left:450px;width: 133px; height: 116px;border:0px;margin:5px 5px;">

</div>

您的原始代码没有明确说明按钮是由什么组成的，或者横幅文本是否是背景或实际文本的一部分。您还引用了示例代码中的一个类，但没有详细说明

我在我的一个域上托管了两个临时图像（OutBox和button），这样您就可以看到它工作了，必要时可以将它们替换为您自己的代码

因此，我创建了上面的代码，基本上使用了3个独立的图像和元素样式，只是为了向您展示一种实现所需功能的干净方法

只需删除任何你想用文本和纯样式等重新创建的图像

您将看到，它只使用1个DIV层，其样式为POSITION:Relative——这将设置层相对于页面上的任何其他内容。两个内部元素是图像元素[其中一个被HREF链接包围，以提供按钮操作。]

这两个元素都使用style POSITION:Absolute，它在x=0的位置锚定到外部DIV的起点。然后设置LEFT style值，将两个img元素移动到其父DIV的右侧

这两个IMG元素将与父元素保持在同一位置，父元素将始终放置在主页中

---

还有其他方法可以达到同样的效果，但不需要关于页面的额外信息-这很好。

您可以轻松实现您想要实现的目标，而无需创建另一个

的麻烦。目前，这是在您的网站中生成

捐赠

按钮和

功能我

图像的代码：

<div class="su-column-inner su-clearfix">

<div style="background: url('https://nationalcdp.org/wp-content/uploads/2014/09/feature-me.png') no-repeat 50% 50%; background-position: center center; background-attachment: absolute!important; width: 133px; height: 116px; display:inline; overflow:visible;"></div>

<div style="display:inline;">

<a data-rel="prettyPhoto" class="spt_newpay_button buttondesign28" href="https://nationalcdp.org/wp-content/plugins/stripe_payment_terminal/terminal/index.php?&amp;serv=false&amp;amount=&amp;comment=true&amp;iframe=true&amp;width=100%&amp;height=100%">Donate!

<span></span>

</a>

</div>

</div>

---

您可以根据自己的喜好调整分配给

img#sideimage

CSS的

左侧边距

、

顶部边距

和

宽度

属性。希望这将解决您所面临的问题。

请同时包含CSS。您好，Fahad。我把我拥有的CSS包括在内，我把它放在了div中。没有其他CSS与之相关。你能分享到你的网站链接吗？在那里，上面的横幅和捐赠按钮都可以看到？我试着使用上面给出的代码在JSFIDLE中重新创建它，但无法真正实现相同的最终产品。当然！此活动的链接是。。。。谢谢你的帮助，法哈德！完美的这非常有效——正是我想要达到的效果。只需要利用利润。非常感谢，法哈德！不客气，我很高兴它能像你所希望的那样工作。谢谢你花时间回复，马丁！我现在正在测试这个解决方案。

<div class="su-column-inner su-clearfix">

<div style="background: url('https://nationalcdp.org/wp-content/uploads/2014/09/feature-me.png') no-repeat 50% 50%; background-position: center center; background-attachment: absolute!important; width: 133px; height: 116px; display:inline; overflow:visible;"></div>

<div style="display:inline;">

<a data-rel="prettyPhoto" class="spt_newpay_button buttondesign28" href="https://nationalcdp.org/wp-content/plugins/stripe_payment_terminal/terminal/index.php?&amp;serv=false&amp;amount=&amp;comment=true&amp;iframe=true&amp;width=100%&amp;height=100%">Donate!

<span></span>

</a>

</div>

</div>

<div class="su-column-inner su-clearfix">

<img src="https://nationalcdp.org/wp-content/uploads/2014/09/feature-me.png" id="sideimage">

<div style="display:inline;">

<a data-rel="prettyPhoto" class="spt_newpay_button buttondesign28" href="https://nationalcdp.org/wp-content/plugins/stripe_payment_terminal/terminal/index.php?&amp;serv=false&amp;amount=&amp;comment=true&amp;iframe=true&amp;width=100%&amp;height=100%">Donate!

<span></span>

</a>

</div>

</div>

img#sideimage {
     position: absolute;
     margin-left: -97px;
     margin-top: 32px;
     width: 98px;
}