为什么在使用“相对”定位时，这个元素的大小设置为 0px x 0px？答案

【问题标题】：Why does this a element have its size set to 0px x 0px when positioned using 'relative'?为什么在使用“相对”定位时，这个元素的大小设置为 0px x 0px？
【发布时间】：2013-03-14 22:54:04
【问题描述】：

我一直在使用 this JavaScript image annotation plugin 为项目添加注释 - 我设法让它在一个空白网页上正常工作，只用这个 HTML：

<div id="sample-image">
    <img src="img.jpg"></img>
</div>

还有这个用于注释的 CSS：

.circle {
        border-radius: 50%/50%; 
        width: 20px;
        height: 20px;
        background: black;
    }

这会产生正确的结果...

但是，当我使用 Twitter 的 Boostrap 和这个 HTML 将它添加到另一个项目时

<div class="container-fluid">
      <div class="row-fluid">
        <div data-spy="affix" data-offset-top="200" class="span3">
          <div class="well sidebar-nav">
            <ul class="nav nav-list">
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div>
        </div>
        <div style="float:right" class="span9">

            <div id="sample-image">
             <img src="img.jpg"></img>
           </div>
        </div>
...

元素位于页面顶部，因为默认情况下它们具有 position: aboslute 属性，如下所示：

<a class="circle" data-toggle="tooltip" data-placement="top" data-original-title="Church" rel="tooltip" onmouseover="$(this).tooltip('show')" style="left: 406px; top: 247px; position: absolute;"></a>

将其更改为 position: relative 会导致它们被正确放置，但它们的大小根据 Chrome 设置为 0px x 0px，因此它们不会显示。

任何想法为什么会这样？

谢谢，杰克

【问题讨论】：

比较两个站点之间点的计算 CSS。
宽高从何而来？签入 Chrome 开发工具。毫无疑问，会有一个 twitter 引导类在某处添加它。
<a> 附加到哪里？是id=sample-image吗？
@ShivanRaptor 我该怎么做？
@ExplosionPills 是 id=sample-image

标签： html css

【解决方案1】：

float 有时会导致包含的对象崩溃。您是否尝试过使用“显示：内联块”？ http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

【讨论】：

这确实使 Chrome 报告了正确的大小 20 x 20 像素，但“点”现在出现在图像的右侧。 display: block 使它在图像下方。我尝试使用 z-index，但我认为我也一定做错了......
请注意，添加 float: left 可以正确显示“点”，但会导致图像在其下方移动。