使用Bootstrap实现的重叠div超出页面宽度，求原因分析

Hey Jake, let's break down and fix those two layout problems you're dealing with: the horizontal scrollbar and the left div spilling below your background image.

Why the Horizontal Scrollbar Appears #

Your absolutely positioned white box has a fixed width:400px, but you didn't set a left position to contain it. On top of that, Bootstrap's row component comes with default margin-left: -15px; margin-right: -15px; styles. When the viewport is narrower than 400px plus that 15px negative margin, your box spills outside the viewport, triggering the scrollbar. Also, since the box is positioned relative to the row (which itself stretches beyond the viewport edges thanks to those negative margins), it makes the overflow worse.

Why the Left Gray Div Spills Below the Background #

Your parent background div has a fixed height:500px, but the inner row is set to height:520px—taller than its parent. Since the row is a block element with position:relative, its child elements (like the gray col-md-3) will stretch to match its height, ending up below the background image.

Fixed Full Code #

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <title>Demo Page</title>
</head>
<body class="d-flex flex-column h-100">
    <!-- Parent background container: Use min-height instead of fixed height, add overflow:hidden to catch stray overflow -->
    <div style="min-height:500px; background-image:url(https://www.w3schools.com/howto/img_parallax.jpg); background-position:center; background-size:cover; overflow:hidden;">
        <!-- Row: Remove fixed height, keep position:relative for absolute positioning reference -->
        <div class="row pb-3 position-relative">
            <!-- Absolute box: Add left:15px to offset row's negative margin, add max-width for responsiveness -->
            <div class="p-3" style="position:absolute; background:white; top:100px; left:15px; height:220px; width:400px; max-width:calc(100% - 30px); z-index:2;">
                <h1>Text to overlap here</h1>
            </div>
            <!-- Columns: Add min-height to match background container's minimum height -->
            <div class="col-md-3" style="background:grey; min-height:500px;">&nbsp;</div>
            <div class="col-md-9" style="min-height:500px;">&nbsp;</div>
        </div>
    </div>
</body>
</html>

Key Changes Explained #

• No more horizontal scrollbar:

  • Added left:15px to the white box to counteract the row's default negative left margin, making sure it stays inside the viewport's bounds.
  • Added max-width:calc(100% - 30px) so the box shrinks automatically on small screens, never spilling outside the viewport (the 30px accounts for 15px padding on both sides).
  • Added overflow:hidden to the parent background container to catch any accidental overflow.

• Left div stays within the background:

  • Changed the parent container's height:500px to min-height:500px—this ensures it's at least 500px tall, but will stretch if content needs more space.
  • Added min-height:500px to both columns to make sure they match the background's minimum height, no matter how little content they have.
  • Removed the row's fixed height:520px so it doesn't stretch beyond the parent container.

This fixes both issues while keeping your overlapping box effect intact, and adds responsiveness for smaller screens too.

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