CSS: Как заставить блок div * не * занимать место в его родительском контейнере

Question

Если у меня есть 2 тега div:

<div id="parentDiv">
   <div id="childDiv"><!-- other html --></div>
   <!-- parent div html -->
</div>

Я хочу, чтобы содержимое <div id="childDiv"> перекрывало содержимое <!-- parent div html -->.

Причина (в случае, если это кому-то кажется плохим дизайном кода): Мне нужен обходной путь для взлома на сайтах Google, я не могу добавить пользовательский код в навигацию на боковой панели, только в основное HTML-пространство, я хочу разместить div, который не занимает места, и относительно позиционировать его над боковой панелью, чтобы обойти принудительное ограничение .

Я могу сделать все, кроме того, чтобы не дать childDiv занять место в его убитом контейнере главной страницы.

Answer 1

Вы можете задать абсолютную позицию и перемещаться по ней с полями.

    #childDiv {
      position: absolute;
      margin-top: -100px;
      margin-left: -100px;
    }

Answer 2

Как насчет простого

#childDiv {height:0; overflow:visible;}

Но вы, вероятно, хотите, чтобы он имел цвет фона, а? Hm.

Answer 3

#parentDiv {
    position: relative;
}
#childDiv {
    position:absolute;
    top:0;
    left:0;
    width:100%;
}

Если вам нужно увеличить содержимое или перекрыть содержимое, находящееся «за пределами» боковой панели, вы можете использовать отрицательные поля, чтобы увеличить ширину childDiv или переместить его вверх (для покрытия отступов или полей, которые вы не можете переопределить).

Если вам нужно, чтобы #childDiv покрывал весь #parentDiv, вы можете использовать немного JavaScript, чтобы установить минимальную высоту для childDiv, а затем добавить цветной фон или что-то другое, чтобы покрыть любой контент.

var parentHeight = jQuery('#parentDiv').height();
jQuery('#childDiv').css('min-height',parentHeight + 'px');

Answer 4

Вы должны вытащить дочерний блок из потока.Лучший способ сделать это - position: absolute для ребенка div и position: relative для родителя div.