Z-Stack CSS 3柔性盒：如何疊加柔性盒項目的DIV？

創建flexbox佈局時未設法堆疊div。要麼他們在容器div內互相推送，要麼在覆蓋層上使用"position:absolute"，這會將div從容器上下文中移出。Z-Stack CSS 3柔性盒：如何疊加柔性盒項目的DIV？

z-索引似乎根本不起作用。

我使用Chrome最新版本，並期待這種行爲：http://dev.w3.org/csswg/css-flexbox/#painting

這是一個基本的Flexbox的佈局plunker： http://plnkr.co/edit/o2BAwvg3XV4YjwAwwmYR?p=preview來說明。

您將不得不評論/取消在css中.overlay類的定義中的定位。

2013-08-27 Taye

在Firefox 23中，它似乎按照我的預期工作。如果沒有'position：absolute'，覆蓋div佔用'.bodybox'的大部分，除了它的文本以外，因爲它在文本之後。通過定位，它位於根堆棧上下文中（因爲'.bodybox'沒有'z-index'）並且覆蓋所有未定位的div，但是如果它們獲得了'z-index：100'，則可以被頁眉或頁腳覆蓋。或者更多。 –

是的，文本是一個匿名Flex項目實際上是煩人的事實。否則，我可以使用疊加div作爲文本flex項目的子項。類似的東西。這將解決Chrome中的問題。我想必須等到各個瀏覽器供應商之間的行爲協調一致。 – Taye

爲什麼你認爲非定位疊加成爲一個彈性項目？我的觀察結果顯示，它是flex項目中的常規塊，從'.bodybox'繼承它的寬度和高度：http://plnkr.co/edit/29zPsZ?p=preview –

好吧，剛剛意識到z-index只適用於定位元素。

中出現的情況下，我需要設置DIV .overlay的容器的高度（只是把高度：100％在.bodybox）

所有現在還是不錯的。

來源

2014-06-08 18:34:41 Taye

解決方案。 –

如果您打算將自己的答案標記爲正確，請添加一個顯示解決方案的解鎖器。 – HipsterZipster

Plz * _ *傾聽其他人的聲音！ – Pizzaboy

Z-Stack CSS 3柔性盒：如何疊加柔性盒項目的DIV？

回答

相關問題