页面第三个元素超出body范围，CSS定位调整问题求助

核心问题 #

元素跑到body外的根本原因有两个：

• 父容器的相对定位类名拼写错误：position-realative应为position-relative，导致所有绝对定位的子元素默认相对于body定位，而非父容器
• 外层<div class="scrollspy-example...">标签未闭合，导致DOM结构解析混乱

修复步骤 #

1. 修正父容器的类名拼写，给绝对定位元素提供正确的定位锚点
2. 补全未闭合的外层容器标签，修复DOM结构
3. 调整各元素的定位参数，确保它们在父容器范围内合理布局

修改后的代码 #

CSS

.rac {
    position: absolute;
    right: 0; /* 改为父容器右侧对齐，避免超出范围 */
    width: 700px;
    height: 700px;
    border-left: 500px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 700px solid #436850;
}
#kshatriya{
    position: absolute;
    right: 10px;
    top: 0; /* 增加top定位，统一基准线 */
}
#kshat-text{
    position: absolute;
    left: -400px; /* 调整left值，让文本在箭头容器内显示 */
    top: 50%;
    transform: translateY(-50%); /* 垂直居中 */
    color: white; /* 增加颜色方便查看 */
}

#kshat-text2{
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%); /* 垂直居中，避免乱跑 */
}

HTML

<body class="bg-dark">
    <div data-bs-spy="scroll" data-bs-target="#navbar" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-body-tertiary " tabindex="0">
        <!-- 修正类名拼写错误 -->
        <div class="item position-relative" id="scrollspyHeading1">
            <div class="rac" align="right">
                <div id="kshat-text">NZ-666 <br> Kshatriya</div>
            </div>
            <img src="img/kasht.png" id="kshatriya" alt="kshatriya">
            <div id="kshat-text2">XDDD</div>
        </div>
    </div> <!-- 补全闭合标签 -->
</body>

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