如何让HTML边框置于动画图片上层？

你遇到的问题核心是直接给HTML根元素加边框时，无法通过常规z-index调整让边框处于图片动画的上层——因为HTML是根堆叠上下文，子元素的层级调整会和根元素的边框产生冲突。下面给你两种可行的解决办法：

方法一：用伪元素实现顶层边框 #

把原HTML的边框替换成一个固定在视口的伪元素，让它始终处于图片上方，这样图片滑入时就会被边框挡住，看起来像是从下方钻进来：

html {
    background-color: black;
    position: relative;
}

/* 用伪元素创建顶层边框 */
html::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 5px inset antiquewhite;
    z-index: 10; /* 确保边框层级高于图片 */
    pointer-events: none; /* 避免边框拦截页面交互 */
}

.authorimage {
    width: 33%;
    padding: 2rem;
    animation-duration: 1s;
    animation-name: slidein;
    position: relative;
    z-index: 1; /* 图片层级低于边框 */
}

@keyframes slidein {
    from {
        transform: translateX(-45rem);
    }
    to {
        transform: translateX(0);
    }
}

方法二：将边框移到body元素上 #

把边框从HTML转移到body，同时让HTML隐藏视口外的内容，这样图片初始在视口外时会被隐藏，滑入时自然在边框内部显示：

html {
    background-color: black;
    overflow: hidden; /* 隐藏视口外的内容 */
}

body {
    margin: 0;
    border: 5px inset antiquewhite;
    min-height: calc(100vh - 10px); /* 减去边框宽度，防止出现滚动条 */
}

.authorimage {
    width: 33%;
    padding: 2rem;
    animation-duration: 1s;
    animation-name: slidein;
}

@keyframes slidein {
    from {
        transform: translateX(-45rem);
    }
    to {
        transform: translateX(0);
    }
}

为什么之前的z-index没用？ #

直接给HTML加边框时，HTML是根堆叠上下文的起点。如果给图片设负z-index，图片会跑到HTML的背景层下方，连边框一起被挡住；如果给内容设正z-index，又会直接盖住边框。这两种方法绕过了根元素的层级限制，完美解决你的需求。

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