你会如何定位这些图像？答案

【问题标题】：How would you position these images?你会如何定位这些图像？
【发布时间】：2011-04-23 13:47:09
【问题描述】：

你看到柱头上的企鹅了吗？我试图让他们超过标题和列表。我想知道你会怎么做？使用绝对位置还是相对位置？我被困住了。

HTML：

<section class="starter">
 <img src="../images/plan-icon.png" width="62" height="73" alt="Plan Icon">
  <h2>Starter Plan</h2>
  <ul>
    <li><span>5GB Disk Space</span></li>
    <li><span>Unmetered Bandwidth</span></li>
    <li><span>Unlimited Add-on Domains</span></li>
    <li><span>Unlimited Subdomains</span></li>
    <li><span>Unlimited Email/FTP Accounts</span></li>
    <li><span>Unlimited MySQL Databases</span></li>
    <li><span>Shell access upon request</span></li>
  </ul>
  <img src="images/starterplan.png" width="192" height="51" alt="Starter Plan">
</section><!-- //.starter -->

.plan-icon 是图像。需要看起来像这样：

【问题讨论】：

标签： css image position

【解决方案1】：

您可以简单地将图像样式设置为float: right

【讨论】：

【解决方案2】：

.starter { position: relative; }
.starter img { position: absolute; top: 5px; left: 140px; }

这个想法是图像被定位为“绝对”，因此它可以位于其父元素“.starter”范围内的任何位置。如果“.starter”没有设置为relative，这将不起作用。

我让它在 Firebug 中工作，.starter img 选择器可能需要更改，但绝对定位的想法应该从这里拿走。

【讨论】：

但这方法太复杂了
恕我直言，使用内联样式意味着他必须对每个企鹅图像应用相同的样式。这与编程的 DRY 思想背道而驰，并且不易维护。方法或我的解释是否令人困惑？

【解决方案3】：

试试

<img src="../images/plan-icon.png" width="62" height="73" alt="Plan Icon" style="float:right;">

我什至可能会建议在其中添加一个padding: 5px 5px;，但这只是我......

【讨论】：

【解决方案4】：

使用相对定位。您还可以给它一个z-index 以将其放置在任何元素的“顶部”。

不管怎样，看看这个页面。它应该可以帮助你：

http://w3schools.com/CSS/css_positioning.asp

【讨论】：

这真的对他想要做的事情没有帮助，并且内联元素上的 z-index 没有太多好处（尽管我可以想到一些这样做的理由）
当然可以。使用相对定位，他可以将其准确定位到相对于其自然位置的位置。
虽然使用相对位置保留了背景，但我正在尝试将图像从背景中取出。哦，好吧，我想我必须绝对定位它们。 [感谢上帝的萤火虫]
@Kawohi，我不确定您所说的“保留背景”是什么意思，但您应该能够使用绝对定位或相对定位来实现您想要的。

【解决方案5】：

如果是我，我会添加这个 CSS。

#plans-wrap section { position: relative; }
#plans-wrap section  .icon { position: absolute; right: 0px; top: 0px; }

【讨论】：