css - 当涉及到图层时显示元素

Question

当涉及到正确的 div 时，我试图使元素 div 可见。

这是我要执行的操作的代码:

http://jsfiddle.net/wjewq5yq/1/

所以当白<div id="block2"></div>在 <div id="content"></div> 上，肯定是隐藏的，但是只要输入到<div id="block1"></div> , 必须显示白色元素。

知道如何解决这个问题吗？

Answer 1

如果只是纯色的话，可以把蓝色的设置成透明，然后通过box-shadow在周围涂上绿色，加上一些relative和z-index 来完成它:

#content {
    overflow:hidden;
    background-color: blue;
    height: 300px;
    width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#block1 {
    position:relative;
    z-index:1;
    box-shadow:0 0 0 500px green, inset 1px 1px 3px;
    height: 150px;
    width: 200px;
}
#block2 {
    background-color: white;
    height: 10px;
    width: 40px;
    position: absolute;
    top: 150px;
    -webkit-animation: moveDiv 5s linear infinite 0s;
    -ms-animation: moveDiv 5s linear infinite 0s;
    -moz-animation: moveDiv 5s linear infinite 0s;
    animation: moveDiv 5s linear infinite 0s;
}
@-webkit-keyframes moveDiv {
    0% {
        -webkit-transform: translateX(0px);
    }
    25% {
        -webkit-transform: translateX(-50px);
    }
    50% {
        -webkit-transform: translateX(-100px);
    }
    75% {
        -webkit-transform: translateX(-150px);
    }
    100% {
        -webkit-transform: translateX(-300px);
    }
}
@-ms-keyframes moveDiv {
    0% {
        -ms-transform: translateX(0px);
    }
    25% {
        -ms-transform: translateX(-50px);
    }
    50% {
        -ms-transform: translateX(-100px);
    }
    75% {
        -ms-transform: translateX(-150px);
    }
    100% {
        -ms-transform: translateX(-300px);
    }
}
@-moz-keyframes moveDiv {
    0% {
        -moz-transform: translateX(0px);
    }
    25% {
        -moz-transform: translateX(-50px);
    }
    50% {
        -moz-transform: translateX(-100px);
    }
    75% {
        -moz-transform: translateX(-150px);
    }
    100% {
        -moz-transform: translateX(-300px);
    }
}
@keyframes moveDiv {
    0% {
        transform: translateX(0px);
    }
    25% {
        transform: translateX(-50px);
    }
    50% {
        transform: translateX(-100px);
    }
    75% {
        transform: translateX(-150px);
    }
    100% {
        transform: translateX(-300px);
    }
}

<div id="content">
    <div id="block1"></div>
    <div id="block2"></div>
</div>

如果它是关于图形背景(图像/纹理)，那么白色元素不应该放在蓝色父元素的蓝色和直接子元素旁边，以便设置 z-index 属性...对不起我的普通英语:)