web-dev-qa-db-ja.com

相対として機能する親要素に関するCSSの絶対位置

廃止されたダストからCSSスキルを更新するための長い旅の中で、特定のCSSプロパティ（特にz-index）をいじってみました。何か奇妙なことに気付いているか、特定の条件があるかもしれません。

例： http://jsfiddle.net/mEpgR/

要素div1の親はcontです。div1のpositionプロパティをabsoluteに設定しましたが、シフトすると、親に対して移動します。絶対配置に設定されたアイテムは、通常のフローの外部にあり、親としてのブラウザーポートに対してのみ移動するという印象を受けました。

何が足りないのですか？

フィドルリンクが機能しない場合は、次のようにコーディングします。

CSS：

.cont {
position:relative; 
height:200px;
top:200px; 
left:100px; 
background: green; width: 200px; 
}

.div1 {
background:red; 
position:absolute; 
top:50px;
}

HTML：

<div class="cont">
<div class="div1">DIV1</div>
</div>
csscss-position
11
brooklynsweb

絶対位置の要素は、静的以外の位置を持つ最初の親要素を基準にして配置されます。 relativeの親の中にあるので、この親に対して絶対的に配置されます。

ブラウザウィンドウを基準にしたfixedの位置を探している可能性があります。

38
Mike Brant