html - 如何在 html 中制作装饰器？

Question

在 WPF 中我可以创建 adorners对于元素。它们放置在透明面板上并且不会影响其他元素的布局。它们不会影响容纳装饰元素的容器的宽度。
工具提示和弹出窗口是装饰器的示例。

装饰器可以轻松相对于装饰元素定位。

我正在尝试使用 css 在 html 中实现相同的效果。

我有两个连续元素

<span class="adorner">*</span>
<span>3</span>

我希望装饰器相对于 span 定位，并且不参与其他静态/相对元素的流，因此在以下情况下:

<span>1</span>
<span class="adorner">*</span>
<span>3</span>

第一个 span 应与第三个相邻(就好像 span 和 class='adorner' 不存在一样)和装饰器 '漂浮在某处。

使用静态定位，它看起来像 1*3，但我需要 13 和 * 放置在我需要相对于 3 放置的位置。

Answer 1

我不完全确定这是否能解决您的问题，但听起来您正在要求相对于“装饰”元素的绝对定位。为了实现这一目标，您需要稍微更改元素结构。

首先，如果您希望元素 A 相对于元素 B 定位，实现此目的最简单的方法是使 A 成为 B 的子元素。因此，这将给出:

<span>1</span>
<span>3
  <span class="adorner">*</span>
</span>

但这本身并不能解决你的问题:你只会得到 13* 。然后，您希望将装饰器类与标准流程分开。最常见的方法是使用 absolute positioning

.adorner {
  position: absolute
  top: <whatever>;
  left: <whatever>;
  }

当然，绝对定位相对于应用了定位的第一个父元素起作用，因此您需要将所有跨度(例如)设置为具有 position:relative。如果装饰器相对于被装饰元素的位置不固定，那么您可以使用 Javascript(或者可能是 Less 之类的东西)来动态确定每个装饰器相对于其父元素的位置。如果需要，您还可以使用 javascript 根据装饰子元素的存在来动态确定元素是否需要 position:relative; (这可以使用 JQuery 的 has() 轻松实现) 功能)。

根据您希望此装饰器具有的其他属性，您可能需要考虑其他样式，例如 z 索引，但这应该解决标准流程之外的相对位置的具体问题。