0

So, consider a "required" box that should be put above an <input> element using CSS pseudo-elements.

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

This 'required' box will appear above the input box using span::after. We can set position:absolute on the after child and apply the offsets like its usually done.

However, this works only if the span element is set to position:relative. This doesn't make sense, because we are not applying offset to the span, only to it's child. But if we let span have its positioning in normal flow, this example won't work. Why is that?

CHAVE_
  • 39
  • 6

1 Answers1

2

Because when you give element position absolute the element is positioned absolutely to its first positioned parent. check this answer for better understand

Ahmed Abdelfattah
  • 469
  • 5
  • 12