html - 将任何特定的 div 放在 body 中，就像 Bootstrap 模式一样

Question

我使用 boostrap 设计了页面。

我的意图是将一个 div 集中在主体中，其他所有内容都应变为灰色或类似于 Bootstrap Modal 的任何内容。当我应用背景颜色为灰色的 div 时，它也与焦点 div 重叠..

fiddle : here .

聚焦 CSS::

    .infocus
{
z-index: 1050;
background-color: #ffffff;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.3);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
outline: none;
}

这是我试过的 fiddle ，我已经为上述目的复制了 Bootstrap 类。是否有任何其他想法来显示特定的 div。

Answer 1

如果您想使用 CSS z-index 属性，您必须将 position 属性设置为 static 以外的值(http://css-tricks.com/almanac/properties/z/z-index/ ).这是您的 fiddle 的更新版本:http://jsfiddle.net/DBkWu/

基本上，我将 position: absolute 添加到您的 .infocus 类:

.infocus
{
    position: absolute;
    z-index: 1050;
    background-color: #ffffff;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    outline: none;
}