我使用负边距来布局两列:

<div id="left-column"><input type="checkbox" /></div>
<div id="right-column">
    <div id="right-column-inner"></div>
</div>

CSS:

#left-column { width: 200px; float: left;}
#right-column { margin-left: -200px; width: 100%; float: left;}
#right-column-inner { margin-left: 200px; float: left;}

不幸的是,在Opera 10.54,Safari 4和FF 3+​​中,复选框不可点击,因为#right-column它在向下传播到复选框之前捕获点击.

我试过操纵z-index但没有运气.

知道如何让这个工作吗？

css z-index值如何影响性能？

如果我在页面上有多个图像,那么我是否使用高z-index值,如10,000？

例如,一个页面包含15个z-index范围为500-10,000的图像,如果图像是可移动的(jQuery可拖动),如果页面被重新绘制,它是否会通过使用高值来影响性能？

假设你有几个图像,DIV它们绝对定位,使它们重叠,但没有定义z-index:

CSS

img {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
}

HTML

<div>
    <img src="...">
    <img src="...">
    <img src="...">
</div>

我注意到Safari和Chrome会在最上面显示最后一个元素.这是标准行为吗？换句话说,假设大多数浏览器会在最上面显示最后一个元素是否相对安全？

这是一个我不太了解的关于z-index和css伪元素:: before/:: after的行为.

它在这个jsfiddle上有说明:http://jsfiddle.net/jgoyon/T6QCf/

我创建了一个定位框并使用:: after伪元素添加内容(也定位).

• 如果我将一个z-index设置为:: after伪元素,一切都运行良好我可以通过播放z-index将其放在父节点之上或之下

    #no-z-index {
      background:lightblue;
      width:100px;
      height:100px;
      position:relative;
    }
    #no-z-index:after {
      content: 'z-index -1';
      width:50px;
      height:50px;
      background:yellow;
      position:absolute;
      z-index:-1; /* z-index in question */
      top:70px;
      left:70px;
    }

• 如果我这样做并设置父级的z-index,它就不再起作用了.

    #z-index {
      background:lightblue;
      left:200px;
      width:100px;
      height:100px;
      position:relative;
      z-index:0; /* parent z-index */
    }
    #z-index:after {
      content: 'z-index -1';
      width:50px;
      height:50px;
      background:yellow;
      position:absolute;
      z-index:-1; /* z-index in question */
      top:70px;
      left:70px;
    }

这是预期的行为吗？

我遇到了一个z-indexing的小问题.

我有一个标题,里面有一个链接.标题的z-index为5,链接的z-index为15.当我打开一个模态时,暗覆盖应该在标题之上,所以我给它的z-index为10.问题是标题中的链接应该在叠加层之上,但它在它后面.我甚至给链接一个相对的位置,但它什么也没做.

任何人都可以帮我解决这个问题吗？

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

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

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

有什么帮助吗？谢谢

我正在尝试制作两个可以通过两个按钮打开和关闭的面板.

小提琴

一切正常,当我喜欢这样的时候:

1. 打开红色面板.
2. 打开绿色面板.
3. 关闭红色面板.

在这种情况下,红色面板在动画期间隐藏在绿色背后.

但是当我喜欢这样的时候:

1. 打开绿色面板.
2. 打开红色面板.
3. 关闭绿色面板.

动画期间,绿色面板始终位于红色面板的前面.

但第一个开放的面板已经z-index: 9开放,第二个开放的面板有z-index: 10.

请帮我解决问题.

我遇到了这个挑战:小提琴.简短的故事是,我希望在z顺序的中间有绿色块,而不必更改HTML.底部为黄色,中间为绿色,顶部为红色.

.parent {
  background-color: yellow;
  position: absolute;
  top: 0;
  left: 0;
  height: 200px;
  width: 200px;
  z-index: 1;
}

.child {
  background-color: red;
  position: relative;
  top: 10px;
  left: 20px;
  height: 50px;
  width: 150px;
  z-index: 100;
}

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

<div class="parent">
  Chillin in the background
  <div class="child">
    I really want to be on top.
  </div>
</div>
<div class="other-guy"> I want to be in the middle! …

当我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>

我无法理清如何将放置在.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 …