web-dev-qa-db-ja.com

CSS：divブロックを親コンテナのスペースを取らないようにする方法

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がろくでなしのメインページコンテナのスペースを占有するのを防ぐ以外は何でもできます。

csshtmlpositioningcss-position
12
David Parks

あなたはそれに絶対的な位置を与えて、マージンでそれをナビゲートすることができます。

 
＃childDiv {
位置：絶対; 
 margin-top：-100px; 
 margin-left：-100px; 
}
14
S.Visser

シンプルなのはどうですか

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

しかし、あなたはおそらくそれを背景色にしたいでしょう、うーん？うーん。

6
Mr Lister
#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
Matthew Darnell

チャイルドブロックをフローから削除する必要があります。これを行う最良の方法はposition: absolute子のdivおよびposition: relative親のdiv。

3
Frank van Wijk