CSS position-visibility与锚点定位滚动边界显隐实例页面

CSS代码：

.box {
    display: block;
    height: 160px;
    max-width: 360px;
    border: 1px solid;
    position: relative;
    overflow: auto;
}
.always .selected {
    anchor-name: --always;
}
.tips-always {
    position-anchor: --always;
    inset-area: top;
    position-visibility: always;
}

.anchors-visible .selected {
    anchor-name: --anchors-visible;
}
.tips-anchors-visible {
    position-anchor: --anchors-visible;
    inset-area: top;
    position-visibility: anchors-visible;
    position: fixed;
}

.no-overflow .selected {
    anchor-name: --no-overflow;
}
.tips-no-overflow {
    position-anchor: --no-overflow;
    inset-area: top;
    position-visibility: no-overflow;
}

HTML代码：

<h4 class="fill">always</h4>                      
<ui-select-list class="box always">
    <a href>选项1</a>
    <a href>选项2</a>
    <a href class="selected">选项3</a>
    ...
    <a href>选项8</a>
    <div class="ui-tips-x tips-always">我是提示内容</div>
</ui-select-list>

<h4 class="fill">anchors-visible</h4>               
<ui-select-list class="box anchors-visible">
    <a href>选项1</a>
    <a href>选项2</a>
    <a href class="selected">选项3</a>
    ...
    <a href>选项8</a>
    <div class="ui-tips-x tips-anchors-visible">我是提示内容</div>
</ui-select-list> 

<h4 class="fill">no-overflow</h4>
<p>锚点在滚动区域外隐藏</p>              
<ui-select-list class="box no-overflow">
    <a href>选项1</a>
    <a href>选项2</a>
    <a href class="selected">选项3</a>
    ...
    <a href>选项8</a>
    <div class="ui-tips-x tips-no-overflow">我是提示内容</div>
</ui-select-list>