CSS/HTML：工具提示推送内容下载

Question

我有一个自定义的CSS工具提示，当它出现时，它会推下其他内容。我知道，我需要添加position: absolute得到它的工作的权利，但我似乎无法找出其中...

HTML：

<p>Fluff</p> 
<p>Fluff</p> 
<p>Fluff</p> 
<p>Fluff</p> 
<p>Fluff</p> 

    <div class="outer"> 

    <a class="tippy" href=""> 
     ICON<img src="" class="icon"/> 
    </a> 

    <div class="tooltip"> 
     STUFF<br/> 
     STUFF<br/> 
     STUFF<br/> 
     STUFF<br/> 
     STUFF<br/> 
    </div> 

    </div><!-- Container --> 

<p>FluffFluffFluffFluffFluffFluffFluffFluffFluff</p> 
<p>FluffFluffFluffFluffFluffFluffFluffFluffFluff</p> 
<p>FluffFluffFluffFluffFluffFluffFluffFluffFluff</p> 
<p>FluffFluffFluffFluffFluffFluffFluffFluffFluff</p> 

CSS：

.outer { 
    width: 350px; 
} 

.tippy { 
    text-decoration: none; 
} 

a.tippy:hover + div { 
    display:block; 
    float: right; 
} 

.tooltip { 
    margin-left: 5px; 
    margin-top: -15px; 
    padding: 10px; 
    width: 265px; 
    height: 110px; 
    background-color: #ccc; 
    position: relative; 
    border: 2px solid #333; 
    display: none; 
} 
.tooltip:after, .tooltip:before { 
    border: solid transparent; 
    content:' '; 
    height: 0; 
    right: 100%; 
    position: absolute; 
    width: 0; 
} 
.tooltip:after { 
    border-width: 11px; 
    border-right-color: #ccc; 
    top: 13px; 
} 
.tooltip:before { 
    border-width: 14px; 
    border-right-color: #333; 
    top: 10px; 
} 

Fiddle:

Answer 1

您需要将position:relative更改为position:absolute在.tooltip CSS块中。

由于此更改，您还需要修改用于定位工具提示的CSS。

如果修改.outer有position:relative这是因为设置.tooltip作为

left:55px; 
top:-15px; 

产生的CSS（仅显示块已更改）一样简单：

.outer { 
    width: 350px; 
    position:relative; 
} 
.tooltip { 
    left: 55px; 
    top: -15px; 
    padding: 10px; 
    width: 265px; 
    height: 110px; 
    background-color: #ccc; 
    position: absolute; 
    border: 2px solid #333; 
    display: none; 
} 

最后a jsFiddle表现它在行动中。