Css 如何将绝对元素定位在相对元素中？

我想把两个绝对元素放在一个相对元素里面。这可以通过设置外部元件的高度来实现。 但我不能使用（或不应该）固定高度，因为内容是动态的

在上面的示例1中，我使用了

height:500px

，红色元素可以包装其他元素

但是如果我删除高度：500px，红线不会环绕内部元素

我错过了什么

代码：

场景1-高度：500px。
1-项目

2项

3项

4项

5项

Lorem ipsum dolor sit amet，是一位杰出的领导者。整只比勒蒂姆犬坐在阿梅特猫旁边。整数的最大直径。维韦拉·维利特·菲塞卢斯·乌尔特里斯。
Lorem ipsum dolor sit amet，是一位杰出的领导者。整只比勒蒂姆犬坐在阿梅特猫旁边。整数的最大直径。维韦拉维利特乌尔特里斯酒店































情景2
1-项目

2项

3项

4项

5项

6项

7项

8项

9-项目

6项

7项

8项

9-项目

6项

7项

8项

9-项目

6项

7项

8项

9-项目

Lorem ipsum dolor sit amet，是一位杰出的领导者。整只比勒蒂姆犬坐在阿梅特猫旁边。整数的最大直径。维韦拉·维利特·菲塞卢斯·乌尔特里斯。

表格单元格中元素的绝对位置？那可不好。为什么是表？@JosephMarikle该单元格可能包含一个弹出式“小部件”，它表示与行的多对一关系。实际上，这是一个非常常见的用例。在单元格内定位允许您将单元格本身用作小部件包装器，从包装器元素保存LOC。但是：这一行不是这样。@zwitterion是否有理由将所有内容放在表格的一行中，并使用换行符，而不是将其实际用作表格？我的意思是，至少它不是每行使用一个表，就像我为了工作而重建的一样。。。这个问题的标题和你的第一句话不一致。哪一个是正确的？我刚刚使用换行符创建了两个单独的场景。不是在真正的代码中。对不起，我要纠正第一句话。你说得对。

Scenario-1 - height:500px.
<form method="post" action="#" >
            <div style='width:100%;height:500px;border: 3px solid red;position:relative;'>
                <table>
                    <tr>
                        <td>
                            <div style='width:100px ;border: 3px solid green;position:absolute;top:0;left: 0;'>
                                1-Item<br/>
                                2-Item<br/>
                                3-Item<br/>
                                4-Item<br/>
                                5-Item<br/>

                            </div>
                        </td>
                        <td>
                            <div style='width:100px ;border: 3px solid pink;position:absolute;top:0;right:0;'>                                
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </form>  
<br/><br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>    <br/><br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>       
Scenario-2
<form method="post" action="#" >
            <div style='width:100% ;border: 3px solid red;position:relative;'>
                <table>
                    <tr>
                        <td>
                            <div style='width:100px ;border: 3px solid green;position:absolute;top:0;left: 0;'>
                                1-Item<br/>
                                2-Item<br/>
                                3-Item<br/>
                                4-Item<br/>
                                5-Item<br/>
                                6-Item<br/>
                                7-Item<br/>
                                8-Item<br/>
                                9-Item<br/>
                                6-Item<br/>
                                7-Item<br/>
                                8-Item<br/>
                                9-Item<br/>
                                6-Item<br/>
                                7-Item<br/>
                                8-Item<br/>
                                9-Item<br/>
                                6-Item<br/>
                                7-Item<br/>
                                8-Item<br/>
                                9-Item<br/>
                            </div>
                        </td>
                        <td>
                            <div style='width:100px ;border: 3px solid pink;position:absolute;top:0;right:0;'>                                
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </form>