Html CSS:Div位置：相对对齐问题

我对div位置相对对齐有问题

我希望第二个div被固定到位，即使我移除了第一个div。 问题在于，当移除第一个div时，第二个div会调整其位置

我的问题是，即使我删除了第一个div，我如何才能保留第二个div的位置？谢谢：）

此代码：

<div style="border: 1px solid red;width:400px;height:150px;margin:0px auto;" >

    <div style="border: 1px solid red; position: relative;
    width: 262px; height: 20px; top: 20px; left: 20px;">div-1</div> 

    <div style="border: 1px solid red; position: relative;
    width: 262px; height: 20px; top: 60px; left: 20px;">div-2</div>
</div>

<div style="border: 1px solid red;width:400px;height:150px;margin:0px auto;" >

    <div style="border: 1px solid red; position: relative;
    width: 262px; height: 20px; top: 60px; left: 20px;">div-2</div>
</div>

第一组
第2组

将输出：

然后，如果第一个div被移除，第二个div将调整其位置。 此代码：

<div style="border: 1px solid red;width:400px;height:150px;margin:0px auto;" >

    <div style="border: 1px solid red; position: relative;
    width: 262px; height: 20px; top: 20px; left: 20px;">div-1</div> 

    <div style="border: 1px solid red; position: relative;
    width: 262px; height: 20px; top: 60px; left: 20px;">div-2</div>
</div>

<div style="border: 1px solid red;width:400px;height:150px;margin:0px auto;" >

    <div style="border: 1px solid red; position: relative;
    width: 262px; height: 20px; top: 60px; left: 20px;">div-2</div>
</div>

第2组

将输出：

---

使用绝对定位，这将使内部div的位置相对于父div（也称为包含块）是绝对的

我建议不要使用内联样式，而是使用样式表：

<style type="text/css">
    #top 
    {
        position:relative;
        border: 1px solid red;
        width:400px;
        height:150px;
        margin:0px auto;
    }

    #child1, #child2
    {
        position: absolute;
        border: 1px solid red;
        width: 262px;
        height: 20px;
        left: 20px;
    }

    #child1 
    { top: 20px; }
    #child2
    { top: 60px; }
</style>    

 <div id="top">
    <div id="child1">div-1</div>
    <div id="child2">div-2</div>
</div>

#顶
{
位置：相对位置；
边框：1px纯红；
宽度：400px；
高度：150像素；
保证金：0px自动；
}
#孩子1，孩子2
{
位置：绝对位置；
边框：1px纯红；
宽度：262px；
高度：20px；
左：20px；
}
#孩子1
{top:20px；}
#孩子2
{top:60px；}
第一组
第2组

---

您可以使用绝对定位-位置：绝对或显示：无（css）。

如果将外部元素的定位设置为相对，则其内部的绝对定位元素将相对于封闭元素进行定位：

<div style="border: 1px solid red;width:400px;height:150px;margin:0px auto; position:relative" >
    <div style="border: 1px solid red; position: absolute;
    width: 262px; height: 20px; top: 20px; left: 20px;">div-1</div>
    <div style="border: 1px solid red; position: absolute;
    width: 262px; height: 20px; top: 60px; left: 20px;">div-2</div>
</div>

第一组
第2组

现在您可以删除div1，而div2将不会移动。

您可以将div1上的设置为隐藏，即使不可见，也会占用页面上的原始空间

<div style="border: 1px solid red;width:400px;height:150px;margin:0px auto;" >
    <div style="border: 1px solid red; position: relative;
    width: 262px; height: 20px; top: 20px; left: 20px;
    visibility:hidden;">div-1</div>
    <div style="border: 1px solid red; position: relative;
    width: 262px; height: 20px; top: 60px; left: 20px;">div-2</div>
</div>

第一组
第2组

@Chad：我使用内联样式主要是为了测试。顺便说一句，谢谢：）@great\u llama：我无法将其设置为hidden，因为div是动态AJAX调用：）