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

Answer 4

Вы можете установить visibility CSS property на 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>