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

Если вы установите позиционирование внешнего элемента относительно, то абсолютные позиционируемые элементы внутри него будут позиционироваться относительно вмещающего:

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

Answer 4

Вы можете использовать абсолютное позиционирование - позиция: абсолютная или отображение: нет (css).