2013-08-27 3 views
9

フレックスボックスレイアウトの作成時にdivをスタックすることはできませんでした。どちらかがコンテナdiv内でお互いを押すか、コンテナコンテキストからdivを取得するオーバーレイに"position:absolute"を使用する必要があります。ZスタッキングCSS 3フレックスボックス:フレックスボックスアイテムであるDIVをオーバーレイする方法は?

z-インデックスがまったく機能しないようです。

私はクロームの最新バージョンを使用していますが、この動作を期待していた。説明する http://plnkr.co/edit/o2BAwvg3XV4YjwAwwmYR?p=preview:ここhttp://dev.w3.org/csswg/css-flexbox/#painting

は、基本的なフレキシボックスのレイアウトとplunkerです。

CSSにある.overlayクラスの定義で、位置のコメントを付けたりコメントを外す必要があります。

+1

Firefox 23では、期待どおりに動作するようです。 'position:absolute'がなければ、テキストの後に来るので、オーバーレイdivはテキストを除いて' .bodybox'の大部分をとります。位置を指定すると、 '.bodybox'は' z-index'を持たないので、ルートスタックのコンテキストにあり、配置されていないdivをすべてオーバーレイしますが、 'z-index:100'を取得した場合はヘッダーまたはフッターでオーバーレイできます以上。 –

+0

はい、テキストが匿名のフレックスアイテムであるという事実は実際には迷惑です。それ以外の場合は、テキストフレックスアイテムの子としてオーバーレイdivを使用することができます。そんな感じ。それはChromeの問題を解決します。私は、異なるブラウザベンダー間で動作が調和するまで待たなければならないと思う。 – Taye

+0

配置されていないオーバーレイがフレックスアイテムになると思われるのはなぜですか?私の所見によれば、フレックスアイテムの通常のブロックボックスであり、 '.bodybox'からその幅と高さを継承していることがわかります。http://plnkr.co/edit/29zPsZ?p=preview –

答えて

2

いいえ、ちょうど実現されたz-インデックスは要素でのみ動作します。提示の場合、私はのdiv .overlayのコンテナの高さを設定するために必要な

(ちょうど置く高さ:.bodyboxで100%)

すべては今良いです。

+1

解決策のためのPlunkerをして​​ください。 –

+4

あなた自身の答えを正しいものとしてマークしようとしている場合は、解決策を表示するプランカを追加してください。 – HipsterZipster

+0

Plz * _ *他の人の話を聞く! – Pizzaboy

関連する問題