将任何特定的div集中在身体上，就像引导程序模态一样

Question

我已经设计了使用boostrap的页面。

我的意图是将div集中在身体上，其他所有东西都应该变成灰色或类似Bootstrap Modal的东西。 当我应用背景色为灰色的div时，它也会与焦点div重叠..

小提琴： 这里 。

焦点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;
}

这是我尝试过的小提琴，出于上述目的，我复制了bootstrap类。 还有其他想法可以显示特定的div焦点吗？

Answer 1

如果要使用CSS z-index属性，则必须将position属性设置为static以外的其他属性（ http://css-tricks.com/almanac/properties/z/z-index/ ）。 这是您的提琴的更新的，有效的版本： http : //jsfiddle.net/DBkWu/

本质上，我在.infocus类中添加了position: absolute ：

.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;
}