如何调整无序列表li内固定State元素位置并解决裁切问题，仅改CSS可行吗

仅修改CSS即可解决问题，无需调整HTML结构。

问题原因 #

• Closed位置偏移：你当前只给hover状态、偶数序列、3倍数序列的<a>标签设置了position: relative，其余状态下<a>不是定位父元素，导致.closed的绝对定位会向上寻找其他定位父级，最终位置错乱。
• Closed被裁切：<a>标签设置了overflow-y: auto，默认会裁剪所有超出标签边界的内容，定位在<a>左上角外侧的Closed标签自然会被裁掉。

推荐修改方案（主流浏览器兼容） #

只需要调整两处CSS属性即可：

1. 给所有ul li a统一添加position: relative，确保任何状态下.closed都以当前卡片为定位参考，解决偏移问题。
2. 给ul li a添加overflow-clip-margin: 30px，扩展溢出裁剪的范围，超出卡片边界30px以内的内容不会被裁剪，刚好容纳旋转后的Closed标签，同时不影响卡片内部内容溢出时的滚动逻辑。
   修改后完整CSS如下：

.col ul
{
    padding-top:20px;
}

h4 {
    font-weight: bold;
    font-size: 1rem;
}

p {
    font-size: 0.8rem;
    font-weight: bold;
    color:mediumblue;
}

ul, li {
    list-style: none;
}

ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

ul li {
    margin: 0em;
}

ul li a:hover, ul li a:focus {
    box-shadow: 10px 10px 7px rgba(0,0,0,.7);
    transform: scale(1.25);
    z-index: 5;
    cursor: pointer;
}

ul li a {
    text-decoration: none;
    color: #000;
    background: #F8F4FF;
    display: block;
    height: 8em;
    width: 18em;
    padding: 1em;
    box-shadow: 5px 5px 7px rgba(33,33,33,.7);
    transition: transform .15s linear;
    overflow-y: auto;
    /* 新增两个属性 */
    position: relative;
    overflow-clip-margin: 30px;
}
ul li a p {
    margin-bottom:0;
}

ul li:nth-child(even) a{
    background: #D4EDEB;
}

ul li:nth-child(3n) a {
    /*top: -5px;*/
    background: #CFF2FF;
}

.closed {
    position: absolute;
    top: 10px;
    left: -15px;
    font-weight: bold;
    background: black;
    color: red;
    text-transform: uppercase;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

旧版浏览器兼容方案 #

如果需要兼容不支持overflow-clip-margin的旧版浏览器，也可以调整定位父级实现，同样仅修改CSS：

/* 给li加定位和外边距，作为closed的定位父级 */
ul li {
    margin: 15px 0 0 15px;
    position: relative;
}
/* 去掉a标签上的position: relative和overflow-clip-margin属性即可 */

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