html - CSS/HTML : Tooltip pushing content down

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

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

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

如果您将 .outer 修改为具有 position:relative 这就像设置 .tooltip 一样简单

left:55px;
top:-15px;

生成的 CSS(仅显示已更改的 block ):

.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在行动中展示它。