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表現它在行動中。