位置：相对但兄弟姐妹认为元素不存在

Question

我正在创建一个工具提示。我的问题是，当工具提示出现时，兄弟姐妹会移动，这与position: absolute不同。我不能使用绝对位置，因为它将工具提示相对于浏览器窗口定位，而不是它的原始位置。

HTML

<p class="tooltip-anchor">Hover me</p>
<span class="tooltip">Hello!</span>

CSS

.tooltip-anchor:hover + .tooltip {
    display: inline-block;
}

.tooltip {
    display: none;
    position: relative;
    color: #fff;
    background: #333;
    padding: 0.25em;
}

我在Codepen上制作了一个qazxsw poi。

Answer 1

在您的代码中使用某些模式可以获得您想要的内容。如果将跨度插入p标签，则可以设置位置：绝对值到跨度（以及相对于其容器的位置），然后根据需要修改它的位置。

绝对位置：从正常文档流中删除元素，并且不会为页面布局中的元素创建空间。它相对于最近的祖先（如果有的话）定位;否则，它相对于初始包含块放置。它的最终位置由顶部，右侧，底部和左侧的值决定。

demo

CSS

<p style="font-size: 17px;">A simple tooltip. CSS is wonderful, may I say.</p>

<p class="tooltip-anchor">Hover me <span class="tooltip">Hello!</span></p>

<p>Hello</p>