如何通过z-index覆盖一个div

Referring in this instance

指在这个实例中

I can not get the div with id="covered" on top of the div with id="cover" simply by using the z-index.

仅通过使用z索引，我无法在id="cover"的div上获得id="cover"的div。

Is there any other solution?

还有别的解决办法吗?

Code from http://codepen.io/anon/pen/jhgtf :

代码从http://codepen。io /不久/钢笔/ jhgtf:

HTML:

<div id="cover"></div>
<div id="covered"></div>

CSS:

#cover{
  position:fixed;
  width:800px;
  background:black;
  height:350px;
  z-index:10;
}
#covered{
  width:80px;
  background:yellow;
  height:50px;
  z-index:11;
}

3 个解决方案

#1

You need to specify a position on #covered:

你需要在上面指定一个位置:

#cover{
  position:fixed;
  width:800px;
  background:black;
  height:350px;
  z-index:10;
}
#covered{
  position: fixed;
  width:80px;
  background:yellow;
  height:50px;
  z-index:11;
}

CodePen example

CodePen例子

Elements with static (default) positioning are not affected by z-index - only positioned elements with fixed, relative, or absolute positioning are. Which of those you should use is dependent on context.

具有静态(默认)定位的元素不受z索引的影响——只受具有固定、相对或绝对定位的元素的影响。你应该使用哪一个取决于上下文。

Official z-index specification

官方的z - index规范

3 个解决方案

#1

更多相关文章

随机推荐