position: absolute足够高z-index:
#element {
position: absolute;
top: 50px;
left: 200px;
z-index: 10;
}
这是Tatu的答案的后续步骤，该方法虽然有效，但使用笨拙但非常常见的方式使用z索引。
Z索引确定相对于其他定位元素的定位元素的堆叠顺序。堆叠顺序也与父元素的堆叠顺序有关。所以：
当页面中有两个同级元素时：
<body>
<div style="position:absolute;z-index:2"></div><!-- Position 2 (top) -->
<div style="position:absolute;z-index:1"></div><!-- Position 1 (bottom) -->
</body>
它们都根据其父项-堆叠body，这是其默认的“底部”。
现在，当这些元素的子级具有z索引时，它们在堆栈中的位置将相对于其父级位置进行确定：
<body>
<div style="position:absolute;z-index:2"><!-- Position 2 (top) -->
<div style="position:absolute;z-index:2"></div><!-- Position 2.2 -->
<div style="position:absolute;z-index:1"></div><!-- Position 2.1 -->
</div>
<div style="position:absolute;z-index:1"><!-- Position 1 (bottom) -->
<div style="position:absolute;z-index:2"></div><!-- Position 1.2 -->
<div style="position:absolute;z-index:1"></div><!-- Position 1.1 -->
</div>
</body>
我发现将子级视为具有“点” z-index很有用-因此具有的元素的子级的z-index:1z-index为1.x。这样，您可以看到，即使我给该div的z-index为100000，它也永远不会出现在父z-index为2的元素上。2.x总是出现在1.x之上。
当您制作“浮动”内容（例如叠加层，便利贴等）时，这很有用。类似的设置是一个不错的开始：
<body>
<div id="contentContainer" style="position:relative;z-index:1">
All your 'page level content goes here. You can use all the z-indexes you like.
</div>
<div id="overlayContainer" style="position:relative;z-index:2">
Anything to float 'on top of the page' goes here. Nothing inside 'contentContainer' can ever appear on top of it.
</div>
</body>
您想要浮动的所有内容都将进入“ overlayContainer”中-基本z索引将两个“层”分开，并且可以避免使用令人困惑的高z索引，例如999999或100000。