CSS相对于父元素和页面/视口的位置

Question

我有一个用CSS实现的自定义工具提示

<td class="has_tooltip">
    some text
    <div class="tooltip">hello I am a tooltip</div>
</td>

tooltip具有position:absolute。我可以将position的{​​{1}}设置为has_tooltip并将工具提示相对于父元素放置，但是我也想相对于页面的右边缘放置它，因此像这样：

relative

使用纯CSS可行吗？

Answer 1

仅当您以合理的精度知道带有“ has_tooltip”类的每个元素的右边缘相对于视口的右边缘的位置。将“ right”属性设置为负值（可能与calc（）或右边距结合使用）可以在上述限制下实现。否则，您需要在样式表中设置一个合理的默认值，并使用JS覆盖每个工具提示。