CSS定位指南：在可滚动容器中固定元素于角落

<div class="scroll-container">
    <img class="corner-image top-left" src="https://f2.toyhou.se/file/f2-toyhou-se/images/51687767_YMNPzQqkmi2CP1H.png" alt="Top left corner">
    <img class="corner-image top-right" src="https://f2.toyhou.se/file/f2-toyhou-se/images/51687774_ZWtici8CxHbaKAt.png" alt="Top right corner">
    <img class="corner-image bottom-left" src="https://f2.toyhou.se/file/f2-toyhou-se/images/51687760_DcjvijLLUCRXi1e.png" alt="Bottom left corner">
    <img class="corner-image bottom-right" src="https://f2.toyhou.se/file/f2-toyhou-se/images/51687807_VnKHqCyMkhDfhgf.png" alt="Bottom right corner">

    <!-- 模拟大量可滚动内容 -->
    <div class="content">
        <p><b>22/05/22</b> <a href="#">Updated: Alpha 0.1.3 Added all bases to base character gallery.</a></p>
        <p><b>21/05/22</b> <a href="#">Feature: Implemented user profile customization options.</a></p>
        <p><b>20/05/22</b> <a href="#">Bug Fix: Resolved an issue with image uploads failing intermittently.</a></p>
        <p><b>19/05/22</b> <a href="#">New: Added dark mode toggle for improved user experience.</a></p>
        <p><b>18/05/22</b> <a href="#">Performance: Optimized database queries for faster loading times.</a></p>
        <p><b>17/05/22</b> <a href="#">UI/UX: Redesigned navigation bar for better accessibility.</a></p>
        <p><b>16/05/22</b> <a href="#">Content: Expanded documentation with new tutorials.</a></p>
        <p><b>15/05/22</b> <a href="#">Security: Patched several minor vulnerabilities.</a></p>
        <p><b>14/05/22</b> <a href="#">Integration: Connected with external API for real-time data updates.</a></p>
        <p><b>13/05/22</b> <a href="#">Testing: Conducted extensive unit and integration tests.</a></p>
        <p><b>12/05/22</b> <a href="#">Deployment: Deployed hotfix to address critical bug.</a></p>
        <p><b>11/05/22</b> <a href="#">Research: Explored new technologies for future enhancements.</a></p>
        <p><b>10/05/22</b> <a href="#">Feedback: Incorporated user feedback into upcoming features.</a></p>
        <p><b>09/05/22</b> <a href="#">Refactor: Cleaned up legacy code for better maintainability.</a></p>
        <p><b>08/05/22</b> <a href="#">Localization: Added support for multiple languages.</a></p>
        <p><b>07/05/22</b> <a href="#">Analytics: Integrated new analytics tools for better insights.</a></p>
        <p><b>06/05/22</b> <a href="#">Collaboration: Improved team collaboration workflows.</a></p>
        <p><b>05/05/22</b> <a href="#">Documentation: Updated API documentation for developers.</a></p>
        <p><b>04/05/22</b> <a href="#">Training: Conducted internal training sessions on new features.</a></p>
        <p><b>03/05/22</b> <a href="#">Planning: Outlined roadmap for next quarter's development.</a></p>
    </div>
</div>

.scroll-container {
    height: 460px; /* 定义容器高度，使其可滚动 */
    overflow-y: scroll; /* 启用垂直滚动 */
    position: relative; /* 关键：为内部绝对定位元素创建定位上下文 */
    border: 5px solid #acb2b5;
    padding: 20px; /* 增加内边距，防止图片与内容重叠 */
    background-color: #f9f9f9;
}

.corner-image {
    position: absolute; /* 关键：使图片脱离文档流，并相对于父容器定位 */
    width: 50px;
    height: 50px; /* 保持图片比例 */
    z-index: 10; /* 确保图片在内容上方显示 */
}

/* 精确设置四个角落图片的位置 */
.top-left {
    top: -1px; /* 稍微超出边框，根据实际需求调整 */
    left: -1px;
}

.top-right {
    top: -1px;
    right: -1px;
}

.bottom-left {
    bottom: -1px;
    left: -1px;
}

.bottom-right {
    bottom: -1px;
    right: -1px;
}

.content {
    /* 确保内容有足够的空间，不被角落图片遮挡 */
    padding: 10px;
}

.content p {
    margin-bottom: 10px;
    line-height: 1.5;
}