CSS position:relative 需要，尽管不使用偏移量

Question

因此，考虑使用 CSS pseudo-elements.

将“必需”框放在 <input> 元素上方

        <div>
          <label for="fname">First name: </label>
          <input id="fname" name="fname" type="text" required>
          <span></span>
        </div>

此'required'框将出现在使用span::after的输入框上方。我们可以在 after child 上设置 position:absolute 并像往常一样应用偏移量。

但是，这仅在 span 元素设置为 position:relative 时有效。这没有意义，因为我们没有对跨度应用偏移量，仅对它的 child 应用偏移量。但是如果我们让span在正常流程中有它的定位，这个例子就不行了。这是为什么？

Answer 1

因为当你给元素绝对位置时，元素绝对定位到它的第一个定位父元素。检查此 answer 以便更好地理解

CSS position:relative 需要，尽管不使用偏移量

CSS position:relative required despite not using offset

css

css-position

pseudo-element