html - 将第一个 li 元素设置为固定并具有与非固定 li 元素相同的布局

Question

我发现第一个<li>元素可以设置为position: fixed;不与其他元素链接滚动。如果我这样做，这个元素的布局会被破坏，即第二个 li 将与第一个重叠。

不固定状态

固定状态

正如您在屏幕截图中看到的，所有元素都向左移动，不再通过相应的表格。我怎样才能实现第一个元素被正确固定和定位？

这是我的示例中的代码：

div {
 display: block
}
ul {
 display: table
}
li:first-child {
 position: fixed
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div style="-webkit-font-smoothing: antialiased;-webkit-box-direction: normal;overflow: auto;">
    <ul style="-webkit-font-smoothing: antialiased;-webkit-box-direction: normal;box-sizing: inherit;display: table;width: 100%;list-style: none;">
        <li style="-webkit-box-direction: normal;box-sizing: inherit;display: table-row;vertical-align: middle;">
            <span style="-webkit-box-direction: normal;box-sizing: inherit;display: table-cell;vertical-align: middle;"></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">Tags</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">Session ID</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">Session Start</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">Session End</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">Provider</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">Stats</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">Actions</span>
        </li>
        <li style="-webkit-box-direction: normal;display: table-row;vertical-align: middle;">
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">lock_open</i>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">efe5158d-f077-4d79-bddb-760559318d9a</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:48:49.929Z">21.1.2020 20:48:49</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:49:12.506Z">21.1.2020 20:49:12</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">asdjndfg</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <span>12 /</span>
                <span>0 /</span>
                <span>1</span>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">radio_button_unchecked</i>
                <a><i class="material-icons">play_circle_outline</i></a>
                <i class="material-icons">play_for_work</i>
                <i class="material-icons">info</i>
            </span>
        </li>
        <li style="-webkit-box-direction: normal;display: table-row;vertical-align: middle;">
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">lock_open</i>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">efe5158d-f077-4d79-bddb-760559318d9a</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:48:49.929Z">21.1.2020 20:48:49</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:49:12.506Z">21.1.2020 20:49:12</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">asdjndfg</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <span>12 /</span>
                <span>0 /</span>
                <span>1</span>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">radio_button_unchecked</i>
                <a><i class="material-icons">play_circle_outline</i></a>
                <i class="material-icons">play_for_work</i>
                <i class="material-icons">info</i>
            </span>
        </li>
        <li style="-webkit-box-direction: normal;display: table-row;vertical-align: middle;">
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">lock_open</i>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">efe5158d-f077-4d79-bddb-760559318d9a</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:48:49.929Z">21.1.2020 20:48:49</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:49:12.506Z">21.1.2020 20:49:12</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">asdjndfg</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <span>12 /</span>
                <span>0 /</span>
                <span>1</span>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">radio_button_unchecked</i>
                <a><i class="material-icons">play_circle_outline</i></a>
                <i class="material-icons">play_for_work</i>
                <i class="material-icons">info</i>
            </span>
        </li>
        <li style="-webkit-box-direction: normal;display: table-row;vertical-align: middle;">
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">lock_open</i>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">efe5158d-f077-4d79-bddb-760559318d9a</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:48:49.929Z">21.1.2020 20:48:49</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:49:12.506Z">21.1.2020 20:49:12</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">asdjndfg</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <span>12 /</span>
                <span>0 /</span>
                <span>1</span>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">radio_button_unchecked</i>
                <a><i class="material-icons">play_circle_outline</i></a>
                <i class="material-icons">play_for_work</i>
                <i class="material-icons">info</i>
            </span>
        </li>
        <li style="-webkit-box-direction: normal;display: table-row;vertical-align: middle;">
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">lock_open</i>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">efe5158d-f077-4d79-bddb-760559318d9a</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:48:49.929Z">21.1.2020 20:48:49</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:49:12.506Z">21.1.2020 20:49:12</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">asdjndfg</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <span>12 /</span>
                <span>0 /</span>
                <span>1</span>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">radio_button_unchecked</i>
                <a><i class="material-icons">play_circle_outline</i></a>
                <i class="material-icons">play_for_work</i>
                <i class="material-icons">info</i>
            </span>
        </li>
        <li style="-webkit-box-direction: normal;display: table-row;vertical-align: middle;">
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">lock_open</i>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">efe5158d-f077-4d79-bddb-760559318d9a</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:48:49.929Z">21.1.2020 20:48:49</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:49:12.506Z">21.1.2020 20:49:12</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">asdjndfg</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <span>12 /</span>
                <span>0 /</span>
                <span>1</span>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">radio_button_unchecked</i>
                <a><i class="material-icons">play_circle_outline</i></a>
                <i class="material-icons">play_for_work</i>
                <i class="material-icons">info</i>
            </span>
        </li>
        <li style="-webkit-box-direction: normal;display: table-row;vertical-align: middle;">
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">lock_open</i>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">efe5158d-f077-4d79-bddb-760559318d9a</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:48:49.929Z">21.1.2020 20:48:49</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:49:12.506Z">21.1.2020 20:49:12</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">asdjndfg</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <span>12 /</span>
                <span>0 /</span>
                <span>1</span>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">radio_button_unchecked</i>
                <a><i class="material-icons">play_circle_outline</i></a>
                <i class="material-icons">play_for_work</i>
                <i class="material-icons">info</i>
            </span>
        </li>
        <li style="-webkit-box-direction: normal;display: table-row;vertical-align: middle;">
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">lock_open</i>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">efe5158d-f077-4d79-bddb-760559318d9a</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:48:49.929Z">21.1.2020 20:48:49</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:49:12.506Z">21.1.2020 20:49:12</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">asdjndfg</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <span>12 /</span>
                <span>0 /</span>
                <span>1</span>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">radio_button_unchecked</i>
                <a><i class="material-icons">play_circle_outline</i></a>
                <i class="material-icons">play_for_work</i>
                <i class="material-icons">info</i>
            </span>
        </li>
        <li style="-webkit-box-direction: normal;display: table-row;vertical-align: middle;">
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">lock_open</i>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">efe5158d-f077-4d79-bddb-760559318d9a</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:48:49.929Z">21.1.2020 20:48:49</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:49:12.506Z">21.1.2020 20:49:12</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">asdjndfg</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <span>12 /</span>
                <span>0 /</span>
                <span>1</span>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">radio_button_unchecked</i>
                <a><i class="material-icons">play_circle_outline</i></a>
                <i class="material-icons">play_for_work</i>
                <i class="material-icons">info</i>
            </span>
        </li>
        <li style="-webkit-box-direction: normal;display: table-row;vertical-align: middle;">
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">lock_open</i>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">efe5158d-f077-4d79-bddb-760559318d9a</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:48:49.929Z">21.1.2020 20:48:49</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:49:12.506Z">21.1.2020 20:49:12</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">asdjndfg</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <span>12 /</span>
                <span>0 /</span>
                <span>1</span>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">radio_button_unchecked</i>
                <a><i class="material-icons">play_circle_outline</i></a>
                <i class="material-icons">play_for_work</i>
                <i class="material-icons">info</i>
            </span>
        </li>
        <li style="-webkit-box-direction: normal;display: table-row;vertical-align: middle;">
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">lock_open</i>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">efe5158d-f077-4d79-bddb-760559318d9a</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:48:49.929Z">21.1.2020 20:48:49</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:49:12.506Z">21.1.2020 20:49:12</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">asdjndfg</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <span>12 /</span>
                <span>0 /</span>
                <span>1</span>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">radio_button_unchecked</i>
                <a><i class="material-icons">play_circle_outline</i></a>
                <i class="material-icons">play_for_work</i>
                <i class="material-icons">info</i>
            </span>
        </li>
        <li style="-webkit-box-direction: normal;display: table-row;vertical-align: middle;">
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">lock_open</i>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">efe5158d-f077-4d79-bddb-760559318d9a</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:48:49.929Z">21.1.2020 20:48:49</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:49:12.506Z">21.1.2020 20:49:12</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">asdjndfg</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <span>12 /</span>
                <span>0 /</span>
                <span>1</span>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">radio_button_unchecked</i>
                <a><i class="material-icons">play_circle_outline</i></a>
                <i class="material-icons">play_for_work</i>
                <i class="material-icons">info</i>
            </span>
        </li>
        <li style="-webkit-box-direction: normal;display: table-row;vertical-align: middle;">
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">lock_open</i>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">efe5158d-f077-4d79-bddb-760559318d9a</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:48:49.929Z">21.1.2020 20:48:49</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:49:12.506Z">21.1.2020 20:49:12</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">asdjndfg</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <span>12 /</span>
                <span>0 /</span>
                <span>1</span>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">radio_button_unchecked</i>
                <a><i class="material-icons">play_circle_outline</i></a>
                <i class="material-icons">play_for_work</i>
                <i class="material-icons">info</i>
            </span>
        </li>
        <li style="-webkit-box-direction: normal;display: table-row;vertical-align: middle;">
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">lock_open</i>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">efe5158d-f077-4d79-bddb-760559318d9a</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:48:49.929Z">21.1.2020 20:48:49</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:49:12.506Z">21.1.2020 20:49:12</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">asdjndfg</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <span>12 /</span>
                <span>0 /</span>
                <span>1</span>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">radio_button_unchecked</i>
                <a><i class="material-icons">play_circle_outline</i></a>
                <i class="material-icons">play_for_work</i>
                <i class="material-icons">info</i>
            </span>
        </li>
        <li style="-webkit-box-direction: normal;display: table-row;vertical-align: middle;">
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">lock_open</i>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">efe5158d-f077-4d79-bddb-760559318d9a</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:48:49.929Z">21.1.2020 20:48:49</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:49:12.506Z">21.1.2020 20:49:12</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">asdjndfg</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <span>12 /</span>
                <span>0 /</span>
                <span>1</span>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">radio_button_unchecked</i>
                <a><i class="material-icons">play_circle_outline</i></a>
                <i class="material-icons">play_for_work</i>
                <i class="material-icons">info</i>
            </span>
        </li>
    </ul>
</div>

标签： htmlcssflexboxcss-positionfixed-header-tables