JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Fixed Positioning</h3>
<section>
    <p>no relative:</p>
        before
        <div class="inline">
            inside1
            <i class="fixed"></i>
            inside2
            <div class="fixed"></div>
            inside3
        </div>
        after
        <b></b>
    </section>

    <section>
    <p>relative with no offset:</p>
        before
        <div class="inline relative">
            inside1
            <i class="fixed"></i>
            inside2
            <div class="fixed"></div>
            inside3
        </div>
        after
        <b></b>
    </section>

    <section>
        <p>relative with offset:</p>
        before
        <div class="inline relative" style="left:100px;top:40px">
            inside1
            <i class="fixed"></i>
            inside2
            <div class="fixed"></div>
            inside3
        </div>
        after
        <b></b>
    </section>

CSS

section
        {
            background:gainsboro;
            margin:15px;
            padding:15px;
        }

        .inline
        {
            display:inline;
            background:yellow;
        }

        .relative
        {
            position:relative;
        }

        .fixed
        {
            position:fixed;
            width:10px;
            height:10px;
        }

        i.fixed
        {
            background:green;
        }

        div.fixed
        {
            background:blue;
        }

        b
        {
            display:inline-block;
            width:10px;
            height:50px;
            background:orange;
        }