如何将Div固定在屏幕右上角？Bootstrap 5.3技术问询

核心问题分析 #

你之前用sticky-top/fixed-top失败，主要是因为目标div嵌套在row/col的网格布局里，父容器的流式布局限制了它的定位行为，无法脱离文档流实现视口级固定。

有效解决方案 #

把目标div从网格结构中移出，使用Bootstrap的定位类实现视口固定：

修改后的完整代码 #

<body class="d-flex flex-column h-100">
<x-horizontal-menu />
<main class="flex-shrink-0 pb-3">
    <div class="container">
        <h1 class="text-center text-primary">Noter un travail</h1>
        <div class="row">
            <div class="col-md-8">
                <!-- 左侧内容区域 -->
            </div>
        </div>
    </div>

    <!-- 固定在屏幕右上角的Div -->
    <div class="fixed-top end-0 mt-5 me-3" style="width: 28%;">
        <!-- 这里放入你的内容 -->
    </div>
</main>
</body>

类说明 #

• fixed-top：将元素相对于浏览器视口固定
• end-0：等效于CSS的right: 0，让元素对齐屏幕右侧
• mt-5：调整顶部间距，避免被顶部的navbar遮挡，可根据你的navbar实际高度调整（比如navbar高56px时用mt-4也可）
• me-3：给右侧留间距，防止元素贴死屏幕边缘
• width: 28%：匹配原col-md-4的宽度比例（原col-md-4是33.33%，减去左右间距后设为28%左右）

额外注意事项 #

如果你的<x-horizontal-menu />使用了fixed-top类，需要给<body>添加pt-5（或对应navbar高度的padding值），避免页面顶部内容被navbar遮挡：

<body class="d-flex flex-column h-100 pt-5">

备选方案（固定在容器右上角） #

如果希望元素固定在页面容器的右上角（而非整个屏幕），可给container添加position-relative，再给目标div用绝对定位：

<div class="container position-relative">
    <h1 class="text-center text-primary">Noter un travail</h1>
    <div class="row">
        <div class="col-md-8">
            <!-- 左侧内容 -->
        </div>
    </div>

    <!-- 固定在容器右上角 -->
    <div class="position-absolute top-0 end-0 mt-3 me-3" style="width: 28%;">
        <!-- 内容 -->
    </div>
</div>

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