web-dev-qa-db-ja.com

CSSを使用して親要素の上に子要素を表示する

私は2つのdivを持っており、一方はもう一方の中にネストされています。親要素には、定義された幅/高さがあります。 CSSのみを使用して、親の上（外側）に子divを表示するにはどうすればよいですか？

編集：申し訳ありませんが、z軸に沿った「上」を意味することを明確にする必要があります。そして、はい、私はすでにz-indexを試しました。私の問題は、子要素が親よりも大きい場合、「フレーム」または「ウィンドウ」効果が発生し、divの一部が切り取られることです。

htmlcssparent
17
zacharyliu

セットする overflow: visible;親div。

#parent {
    overflow: visible;
}

Askerの更新を反映するように変更されました。

33
sixthgear

位置定義を使用して、ページ上に相対的または絶対的に配置できます。 IE：

真上に表示するには、このステートメントの100pxを子ボックスのサイズに置き換えます。

。child {
位置：相対; 
上：-100px; 
}
3
Tyler Carter

このようにしてください：

.child { 
position: absolute; 
margin: -100px;
}

Position：absoluteを使用すると、子が上にシフトしたときに、子が残した空きスペースが削除されます。

編集-更新を読んだ後：position：absoluteはこの状況にも適用されます。それは子供を親から連れ出します。次に、余白を使用して、希望どおりに配置します。

このようにして、子を親よりも大きく、その上に配置できます。

.parent{
height: 50px;
width: 50px;
}
.child {
position: absolute;
height: 100px;
width: 100px;
margin: -75px 0 0 -75px;
}
2
resopollution

これを行う必要があると確信している場合は、

マージントップ：-100px;子要素上、または上に表示するには多くのピクセルが必要です。

1
Nico Burns

Chachaが言ったことと同様に、親に相対的な位置を与え、子に絶対的な位置を与えてから、子にtop：-100pxを与える必要があります。

親はオーバーフローを非表示に設定していますか？それはあなたの努力を妨げるかもしれません。

1
skybondsor

親要素に負のマージンを設定し、パディングでオフセットすることができます-たとえば、margin-left：-100px;パディング-左100px。これにより、子が重なり合って上にいることができる左側に100pxが与えられます。

0
fuzzy marmot