z-index不工作与位置绝对 [英] z-index not working with position absolute

问题描述

我打开控制台（chrome \firefox）并运行以下行：

  $（body）。 append（< div id = \popupFrame\style = \width：100％; height：100％; background-color：black; opacity：0.5; position：absolute; top： 0; z-index：1; \/>）; 
 $（body）。append（< div id = \popupContent\style = \width：200px; height：200px; z-index：1000; background-color：white ; \> dasdasdsadasdasdasdasdasd< / div>）; 
  

#popupContent应该在上面，但它受#popupFrame透明度的影响。

内容不包含在#popupFrame中，这使得这很奇怪。

目标是创建firefox像警报框<

提前感谢。

div class =h2_lin>解决方案

第二个div是 position：static （默认值），因此z-index不适用于它

您需要将position属性设置为 static 以外的任何位置，您可能需要 relative ）。 z-index 到。

I opened the console (chrome\firefox) and ran the following lines:

$("body").append("<div id=\"popupFrame\" style=\"width:100%;height:100%;background-color:black;opacity:0.5;position:absolute;top:0;left:0;z-index:1;\" />");
$("body").append("<div id=\"popupContent\" style=\"width:200px;height:200px;z-index:1000;background-color:white;\" >dasdasdsadasdasdasdasdasd</div>");

The #popupContent should be above all but it's affected by the #popupFrame opacity.

The content is not contained in #popupFrame what makes this very weird.

The goal is to create firefox like alert box

I'll appreciate any kind of help.

Thanks in advance.

解决方案

The second div is position: static (the default) so the z-index does not apply to it.

You need to position (set the position property to anything other than static, you probably want relative in this case) anything you want to give a z-index to.

这篇关于z-index不工作与位置绝对的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！