标签: z-index

我在规格中找不到.我正在使用大量的第三方JavaScript,并希望确保某些部分出现在其他所有内容之上.

我有两个相对定位的DIV A和B.a有一个DIV作为子元素,称为A',它是绝对定位的,z-index为1000.DIV B'是DIV B的子元素,也是绝对定位的.

Firefox按预期渲染:A'-B'-BA(从用户最近到最近)然而,在IE7中我得到:B'-B-A'-A

请有人帮我解决一下吗？我已经把这个问题浪费了几个小时!

提前谢谢,斯蒂芬

我有一个问题,我的可排序对象的z-index不在我的droppable之上.

• 如果您访问http://clareshilland.unknowndomain.co.uk/.
• 按此Ctrl + L按钮显示登录屏幕.
• 输入用户名clare和密码shilland.
• 然后它将加载到管理栏中,如果您单击manage gallery.
• 将出现一个弹出缩略图视图,其中包含该库中的所有照片.

问题是,当您将'polaroids'从网格拖到删除区域时,它们位于删除区域下.

我尝试将删除区域放在与网格相同的div中,但它没有区别,我只是不知道该做什么,所以任何帮助都将是一个巨大的帮助!

只是一个简单的问题,我找不到答案.我听说你不能(你可以,但它不符合w3c标准)有相同的z索引.这是真的？我可以有两个<div>z-index为3的元素吗？谢谢.

我有以下div,我正在尝试在my_flash前面制作iframe层.这是一个常见的问题,我已经阅读了所有可以找到的解决方案,但我仍然在IE8中遇到问题.顺便说一句,我正在使用SWFobject.

这是来源:

<script type="text/javascript">
swfobject.embedSWF("index.swf", "my_flash", "100%", "100%", "8.0.0");
swffit.fit("my_flash",900,650);
</script>

<div id="my_flash" style="z-index:1;"></div>

<div  style="border:none; overflow:hidden; width:50px; height:21px; z-index:9999; position: absolute; bottom: 5px; left: 110px;" >
<iframe src="http://www.facebook.com/plugins/like.php?blah.html" scrolling="no" frameborder="0" allowTransparency="true"  style="z-index:9998"/>
</div>

我在同一页面上使用Twitter Bootstrap Modal和Youtube Video.我正面临Z-Index问题,其中视频显示在Chrome浏览器的模态窗口上方.

我该如何解决这个问题？

http://mink7.com/projects/cmrc/home.html

所以我一直在和盒子阴影一起玩,我最近做了类似这样的事情并且它工作得很完美.然后突然间它没有明显的原因停止工作!

我要做的是有一个简单的div框,下方有双阴影,可以产生一种折叠效果.

如果你在jfiddle http://jsfiddle.net/TJuDu/上查看,你可以看到我所做的所有代码.问题是堆叠:before和:after元素,它的位置正确但堆叠错误,阴影位于.layout div后面,当它们应该清楚显示在.box div后面时.如果我删除z-index值,我可以看到位于.box div上方的阴影.

事情是我在另一个页面上完全喜欢这个并且它起作用,然后突然它停止在该页面上工作并且在我做的这个例子上.

基本上,如果你看一下这个,你会看到我有一个元素,其中应用了一个生成内容的变换.该:after元素应该出现在后面,div但事实并非如此.没有任何数量的!important影响.

如何让伪元素出现在div？后面？

我不关心IE 8或更低版本.

我有一个盒子阴影的问题,被另一个div遮挡.

这是我的代码:

HTML的

<div id="wrap">
        <div id="header">
            <div id="nav"></div>
        </div>  
        <div id="main_content"></div>
        <div id="footer"></div>
    </div>

CSS-

body{
    margin:0;
}
#wrap{
    margin:0 auto;

    width:84%;
}
#header{    
    background-image:url(img/header_pattern.png);
    background-repeat:repeat;

    margin:0 auto;

    width:100%;
    height:170px;

    box-shadow:5px 5px 5px black;
    z-index:1;
}
#main_content{
    background-image:url(img/main_pattern.png);
    background-repeat:repeat;

    width:100%;
    min-height:700px;
    height:100%;
    z-index:2;

}

Screenshot-

http://i.stack.imgur.com/TfDyi.png

我怎样才能使阴影不会"堆积在"(在z轴上),因此被#main_contentdiv 遮挡,但仍然在我的内部#wrap？

谢谢.

不,我不只是想#main_content推倒.

我想要一个.tag-preview-containerflex item(.image-container)的绝对定位子元素()来重叠DOM中的其他元素(例如标题.header).我z-index将绝对定位元素设置为2(即使1应该工作).但是,该元素不会与flex容器(.tags-panel)外部的任何DOM元素重叠.事实上,它完全被容器切断了.我没有设置DOM中任何其他元素的z-index,因此根应该是堆叠上下文.

<div class="panel-container">
  <div class="header">

  </div>
  <div class="tags-panel">
    <div class="image-container">
      <div class="tag-preview-container">
      </div>
    </div>
    <div class="image-container">

    </div>
    <div class="image-container">

    </div>
    <div class="image-container">

    </div>
  </div>
</div>

这是scss代码,这里是JSFiddle

.panel-container {
    width: 400px;
  height: 400px;
  position: relative;
  margin: auto;
  .header {
    width: 100%;
    height: 40px;
    background-color: green;
  }
  .tags-panel {
    position: absolute;
    background-color: red;
    top: 40px;
    bottom: 0px;
    width: 100%;
    overflow-y: auto;
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
  }
} …