pre元素内按钮绝对定位异常：按钮相对文档而非父元素定位

绝对定位元素的定位逻辑是：优先以最近的、position属性非static（默认值）的祖先元素作为参照容器，如果所有祖先都是static属性，就会直接相对于整个HTML文档定位。你的pre元素默认是static定位，所以按钮会跳过它，以文档为基准定位。

修复步骤 #

1. 给父元素pre添加position: relative样式，让按钮以pre为定位参照：

pre[class*="language-"] {
    position: relative;
    /* 可选：添加顶部内边距，避免按钮覆盖代码内容 */
    padding-top: 2rem;
}

2. 保留你原本的按钮样式即可，此时按钮的top:5px和right:5px会基于pre的边框内侧计算位置：

pre[class*="language-"] button {
    position: absolute;
    top: 5px;
    right: 5px;

    font-size: 0.9rem;
    padding: 0.15rem;
    border: ridge 1px #7b7b7c;
    border-radius: 5px;
    text-shadow: #c4c4c4 0 0 2px;
}

code[class*="language-"] button:hover {
    cursor: pointer;
    background-color: #bcbabb;
}

补充说明 #

• position: relative仅会改变子元素绝对定位的参照，不会影响pre本身的正常布局位置。
• 添加padding-top是因为绝对定位的按钮脱离了文档流，会覆盖pre内的代码内容，预留顶部空间可避免这个问题。

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