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

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

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

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

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

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

13
css css-position html positioning

4 ответов

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


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

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

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

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

5

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

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');
3