有许多GWT DialogBox',第一个始终保持在底部,新的创建在顶部.我想要获得的是一种在单击时将其中一个对话框置于顶部的方法.我没有找到GWT方法来处理深度(与CSS标签相关z-index但缺少一些文档).

我有一个我希望能够排序的div列表.每个div中都有文本,并且里面还有一个句柄(由于UI,我只想在列表项的左半部分被拖动时进行排序).在Chrome/FireFox中,这非常有用,但在IE中,如果单击文本,即使文本在句柄内,也不会让您排序.

我在这里找到了问题的模型,请确保使用Internet Explorer进行测试:http://jsfiddle.net/t8Ebd/

我假设这是一个分层的事情,但尝试了以下方法,没有运气:

• 更改文本和句柄的z索引
• $( "ITEMNAME")disableSelection();
• ms-user-select:none; 用户选择:无;
• 将文本类添加到句柄列表 - 这解决了问题,但不适用于我,因为我不希望列表项右半部分的文本触发排序
• 在手柄上设置背景颜色 - 我知道这听起来很奇怪,但是如果我设置了一个颜色,那么它就会成为最顶层的元素,因此它会正常运行,尽管它隐藏了对我不起作用的文本.

任何人有任何其他想法？

我试图把蓝色方格div的角落放在橙色div下面.我尝试了所有我知道的东西: z-index不起作用,因为我的div被包裹在另一个div中,如果我打开它,我会遇到定位八个元素的麻烦.

谁能告诉我怎么做？或者如何对所有元素使用z-index？

是)我有的:

我需要的:

到目前为止我的HTML:

 body {
   background-color: #222;
   background-repeat: no-repeat;
 }
 #blueSquare {
   position: absolute;
   left: 15px;
   top: 15px;
   width: 50%;
   height: 170px;
   -webkit-transform: rotate(-45deg);
 }
 #rightTopblueSquare {
   height: 100%;
   width: 50%;
   position: relative;
   left: 50%;
   background-color: #7ab9c2;
   opacity: .99;
 }
 #leftBottomblueSquare {
   position: relative;
   top: -100%;
   height: 100%;
   width: 50%;
   background-color: #6baaae;
 }
 /*----------------------------------*/
 #greySquare {
   width: 50%;
   height: 170px;
   position: absolute;
   bottom: 15px;
   left: 15px;
   -webkit-transform: rotate(45deg);
 }
 #lefTopgreySquare {
   height: 100%;
   width: 50%;
   position: …

当我在同一页面上放置两个ng-grid并打开第一个网格的colum菜单时,第二个网格的标题将重叠,如此屏幕截图所示:

我已经尝试将z-index列菜单设置为非常高的值,但它没有任何效果.我尝试了其他几种方法,但我显然遗漏了一些东西.有什么建议？Plunker展示了这里的行为:

http://plnkr.co/edit/Eb3BL0l01GHXLvVSGTA5

我在使用z-index时遇到了一些麻烦。这是我的简化布局：

<div id="overlapper"></div>
<div id="container">
    <div id="child1"></div>
    <div id="child2"></div>
</div>

我需要overlapper出现在前面child1但后面child2。我尝试弄乱z索引，但是由于堆栈上下文，它没有用。

有什么帮助吗？谢谢

我有这个代码

#mtitle {
  display: inline-block;
  margin: 0;
  background-color: #000000;
  z-index: 999;
}
#tsub {
  display: inline-block;
  margin-left: 0;
  left: 0;
  position: absolute;
  font-size: 85px;
  z-index: 0;
}

<header>
  <h1 id="mtitle">Tepid Beans</h1>
  <div id="tsub"><span>- Games</span>
  </div>
</header>

#tsub出现在的顶部#mtitle，但我不知道为什么。

当我z-index从中取出时,为什么红色div位于绿色div前面.wrapperRed？

感觉就像z-index是继承了链条.

如果我z-index将绿色div 更改为6,即使在删除第一句中描述的行后,它也会保留在红色div的前面.

.wrapperRed {
  height: 200px;
  width: 200px;
  position: absolute;
  z-index: 1; /* Why is the red div in front of the green one, if this z-index is deleted? */
}

.red {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: red;
  z-index: 5;
}

.green {
  height: 200px;
  width: 200px;
  background-color: green;
  position: absolute;
  top: 100px;
  left: 100px;
  z-index: 1;
}

<div class="wrapperRed">
  <div class="red"></div>
</div>
<div class="green"></div>

当我的拖放事件开始时,我需要覆盖一个子div来覆盖它的父div,但我无法使用z-index将子div放在父级之上.

这是我的HTML:

<div class="some-element">
  <div class="parent-div">
    <div class="child-div">
      <p>This should be over the parent</p>
    </div>
    <h1>Some text lorem ipsum</h1>
  </div>

  <div class="another-div">
    <p>lorem ipsum</p>
  </div>
</div>

这是我的CSS

html, body {
  height: 100%;
  width: 100%;
}

.some-element {
  background-color: blue;
  width: 100%;
}

.parent-div {
  background-color: red;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 1;
}

.child-div {
  background-color: green;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 999;
}

这是CodePen演示我的问题:https://codepen.io/leofontes/pen/LkgJpo

我认为通过使用z-index和位置相对我可以实现我想要的,但它似乎没有堆叠在父级之上.对于发生了什么有什么想法？

我无法理清如何将放置在.content-wrapper{ overflow:hidden; .content{position:absolute;} }最下方的元素移动到最顶层.

考虑下面的截图:

与人照片的图像元素被放置在.content元素下.但是由于父母.content-wrapper有一个overflow:hidden属性,他的头部照片上的部分用黄色突出显示(用红色箭头指向).主要问题是我无法将隐藏的溢出更改为其他任何内容.

在不使用JavaScript的情况下解决这样的问题真的是真的吗？

====补充1 ====

为了澄清这个问题,我在下面编写了一个代码片段:

.wrapper{
  width:100%;
  overflow:hidden;
  position:initial;
  padding:0 10px;
  background-color:#EEEEEE;
  box-sizing:border-box;
}

.content-wrapper{
  position:relative;
  overflow:hidden;
  background-color:#DDDDDD;
  margin:10px 0;
  min-height:350px;
}

.content{
  background-color:white;
  position:absolute;
  top:30px;
  left:10px;
  right:10px;
  bottom:10px;
}

.content.grayed{
  background-color:#CCCCCC;
}

.content.positioned{
  top:50px;
  left:180px;
  bottom:-50px; //negative positioned parts supposed to be hidden
  right:-50px;  //as .content-wrapper has overflow:hidden;
}

.content.positioned img{
  width:40%;
  height:auto;
  margin-top:-40vh; //but that is not supposed to be hidden out of …

我正在努力实现clipped under the app bar临时抽屉的风格。但我似乎无法在临时抽屉上设置 z 索引。

modalMaterial-ui 中的临时抽屉具有组件的 z 索引，1300正如我在此处提出的问题中提到的https://github.com/mui-org/material-ui/issues/22562。

因此，如果我使用文档中给出的将应用程序栏 zIndex 设置为 的方法theme.zIndex.modal + 1，我可以获得“在应用程序栏下剪辑”效果。但这也意味着我的应用栏将高于我的所有模式。这不是我想要的。

因此，我想将临时抽屉的 z 索引设置为 ，1250并将应用程序栏的 z 索引设置为 ，1251以获得所需的效果而不产生任何副作用。

我正在尝试使用钩子设置 zIndex，makeStyles如您在沙箱中看到的以及下面的代码片段：

const useStyles = makeStyles((theme) => ({
  appBar: {
    zIndex: 1251
  },
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
    zIndex: 1250
  },
  drawerPaper: {
    width: drawerWidth
  }
}));

<AppBar position="fixed" className={classes.appBar}>
   .
   .
   .
</AppBar>
      

<Drawer
  className={classes.drawer}
  open={true}
  classes={{
    paper: classes.drawerPaper …