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

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

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

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

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

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

Ответ 1

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

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

Ответ 2

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

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

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

Ответ 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');

Ответ 4

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