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>

将会输出:

- marknt15

Answer 1

如果您将外部元素的定位设置为相对，则其中的绝对定位元素将相对于包含元素进行定位：

<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不会移动。

- Jordi

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/

- Chad Grant

---

@Chad：我主要是出于测试目的使用了内联样式。顺便说一句，谢谢 :) - marknt15

Answer 3

你可以将DIV1的visibility CSS属性设置为hidden，即使在不可见的情况下，它仍将占据页面上原来的空间。

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

- great_llama

---

@great_llama：我不能将其设置为隐藏，因为这个div是动态的 AJAX 调用 :) - marknt15

Answer 4

你可以使用绝对定位 - position:absolute 或者 display:none (css)。

- NinethSense