FF4溢出和z-index问题(子级不溢出另一个父级)

I have this seemingly easy issue in FF4.
In the code below I need P1_child to overflow (and placed above) P2_child. However P1_child disappears behind P2 (not even to speak of P2_child as intended)

Am I missing something simple?

<div>

  <div id="P1" style="position:relative; z-index: 21;">
   <div id="P1_child" style="z-index: 2;"></div>
  </div>

  <div id="P2" style="position:relative; z-index: 21;">
   <div id="P2_child" style="z-index: 1;"></div>
  </div>

</div>

Thanks in advance

#0

You need to assign position:absolute to child divs (otherwise z-index won't work), that way they will position relative to theirs parents (as they have position:relative).

You also need to remove z-index from parent divs, because when you assign z-index to relative positioned elements, child elements are positioned relative to their parents stacking context. You have full documentation here.

<div>

    <div id="P1" style="position:relative">
        <div id="P1_child" style="z-index: 2; position:absolute">P1</div>
    </div>

    <div id="P2" style="position:relative">
        <div id="P2_child" style="z-index: 1; position:absolute">P2</div>
    </div>

</div>

Or check it and test it in this jsFiddle

推荐文章

接口中是否需要serialVersioUID(我希望不需要)?

接口中是否需要serialVersioUID(我希望不需要)?

推荐文章

将两个打印到一行的行合并到mysql数据库中

将两个打印到一行的行合并到mysql数据库中

推荐文章

Java if/else行为异常

Java if/else行为异常

推荐文章

将邮件包含推送到java程序

将邮件包含推送到java程序

推荐文章

Drupal-搜索框不工作-自定义主题模板

Drupal-搜索框不工作-自定义主题模板

推荐文章

字符串的C数组

字符串的C数组

推荐文章

如何在Java SE 6的内置web服务器上运行Jersey?

如何在Java SE 6的内置web服务器上运行Jersey?

推荐文章

如何用C++0X支持构建Boost?

如何用C++0X支持构建Boost?

推荐文章

获取较旧的PHP扩展

获取较旧的PHP扩展

推荐文章

C++生成通用模板函数的专门化

C++生成通用模板函数的专门化

推荐文章

引用HTML属性值

引用HTML属性值

推荐文章

使用Java Youtube API通过代理上传到Youtube

使用Java Youtube API通过代理上传到Youtube

推荐文章

静态函数中是否可以递归?

静态函数中是否可以递归?

推荐文章

函数在IE中运行良好,但同一个函数在mozilla 3.6中不起作用

函数在IE中运行良好,但同一个函数在mozilla 3.6中不起作用

推荐文章

用as3画蜂巢

用as3画蜂巢

推荐文章

在AIX上编译netcat

在AIX上编译netcat