Question

我使用boostrap设计了页面。

我的目的是将div放在身体上，其他一切应该变成灰色或类似于Bootstrap Modal。当我应用背景颜色为灰色的div时，它也会与焦点div重叠..

小提琴： here。

focue 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/

基本上，我在您的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;
}

像引导模态一样，将任何特定的div聚焦在体内

1 个答案: