Great question! Let’s unpack exactly why that Font Awesome icon gets pushed to the right, and clear up the role of position: relative here.

1. How margin-left: auto works to push the icon right #

First, let’s confirm: the <button> element in your example acts as a flex container (either browsers apply default flex behavior to form elements like buttons, or it’s explicitly set in the pen’s CSS).

In a flex layout, when you set margin-left: auto on a flex item (your <i> element here), the browser does two key things:

• It calculates the remaining available space on the left side of the item within the flex container. This value equals:
  Total button width - width of "Log in" text - width of the icon element
• It assigns that calculated value directly as the left margin of the icon. This fills all empty space between the text and the icon, pushing the icon all the way to the button’s right edge.

This is a handy flexbox trick for creating spaced-out layouts without relying on justify-content.

2. Is position: relative relevant here? #

You’re spot-on—position: relative has no impact on this layout at all.

position: relative only alters an element’s position if you pair it with offset properties like top, left, right, or bottom. Since those offsets aren’t present in your .fa class, the element stays in its normal flex layout position, and the position: relative declaration does nothing here.

内容的提问来源于stack exchange，提问作者NewDev