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

Question

我有关于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，则第二个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>

将输出：

Answer 1

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

<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>

现在你可以删除div1并且div2不会移动。

Answer 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>

http://kilianvalkhof.com/2008/css-xhtml/understanding-css-positioning-part-1/

Answer 3

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

Answer 4

您可以将DIV1上的visibility CSS property设置为隐藏，即使是不可见，也会占用页面上的原始空间量。

<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>