如何实现Shipped from DIV随For Account & Risk of Messrs DIV内容自动位移？

你的核心问题是所有元素都用了position:absolute绝对定位，绝对定位的元素会脱离正常文档流，完全不参与页面的布局计算，所以div7内容变多/变少都不会影响div9的位置。要实现需求，得让需要联动的元素回到正常文档流里，只给真正需要固定位置的元素用绝对定位。

具体调整方案 #

1. 保留顶部固定的元素（div1-div4）的绝对定位，因为它们位置不需要随内容变化。
2. 把左侧的For Account & Risk of Messrs区域（div5、div7）和右侧的Negotiated with区域（div6、div8）做成左右两列的布局，让它们在正常文档流里排列。
3. 把div9放在左侧列的div7后面，这样div7高度变化时，div9会自动被向下/向上推动。

修改后的完整代码 #

<html>
<head>
<style>
* {
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    width: 210mm;
    height: 297mm;
    border: 1px solid red;
    background-color: khaki;
    margin: auto;
    padding-top: 70px; /* 给顶部绝对定位元素留出空间 */
}

div {
    border: 1px solid red;
}

/* 顶部固定元素保留绝对定位 */
#div1 {
    position: absolute;
    top: 0;
    left: 10px;
}

#div2 {
    position: absolute;
    top: 20px;
    left: 10px;
}

#div3 {
    position: absolute;
    top: 40px;
    left: 10px;
}

#div4 {
    position: absolute;
    top: 40px;
    right: 10px;
}

/* 左右列布局 */
.left-column {
    float: left;
    width: 300px;
    margin-left: 10px;
}

.right-column {
    float: left;
    width: 300px;
    margin-left: 90px; /* 调整两列之间的间距 */
}

/* 去掉绝对定位，让元素回到正常流 */
#div5, #div7 {
    width: 100%;
}

#div6, #div8 {
    width: 100%;
}

#div9 {
    width: 500px;
    margin-left: 10px;
    clear: left; /* 清除浮动，确保在左右列下方 */
    margin-top: 20px; /* 可以添加间距调整 */
}
</style>
</head>
<body>
<div class="container">
    <!-- 顶部固定元素 -->
    <div id="div1">Container No. FFAU2203078</div>
    <div id="div2">Serial No. 783</div>
    <div id="div3">Invoice No. DTM/16200158</div>
    <div id="div4">Dated: 19-04-2023</div>

    <!-- 左侧列 -->
    <div class="left-column">
        <div id="div5">For Account & Risk of Messrs:</div>
        <div id="div7">
            <p>UAB IMLITEX<br>
            EUROPOS AVE. 124, KAUNAS<br>
            LT-46351, LITHUANIA<br></p> 
        </div>

        <!-- div9放在左侧列最后，自动跟随div7高度 -->
        <div id="div9">Shipped from: PORT QASIM PAKISTAN TO CONSTANTA ROMANIA</div>
    </div>

    <!-- 右侧列 -->
    <div class="right-column">
        <div id="div6">Negotiated with:</div>
        <div id="div8">UAB IMLITEX</div>
    </div>
</div>
</body>
</html>

关键变化说明 #

• 给.container添加padding-top，避免顶部绝对定位元素覆盖下面的内容。
• 用float实现左右列布局，让div5/div7和div6/div8在同一行排列，同时保持正常文档流。
• 去掉div5、div7、div6、div8、div9的position:absolute，让它们回到正常流中，默认position:static可省略。
• div9放在左侧列的div7之后，clear:left确保它不会被左右列的浮动影响，会自动占据div7下方的位置，当div7内容变多时，div9自然向下移动。

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