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 CSS区块中将position:absolute更改为.tooltip。

由于此更改，您还需要修改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展示了它。

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

1 个答案: