在特定单元格的嵌套flex容器（3x3网格）内添加叠加层div

Question

我有一个具有flex-box概念的3x3网格，在每个单元格内，它都有另一个3x3网格。

我试图在一个单元格的内部网格上放置一个叠加层，但是我没有找到如何做的。

我发现了一些这样的例子 Overlay / hover a div in flexbox container div 但是它不能在嵌套的flex-box中工作，或者我不知道如何设置它们。

这是html，网格只有两个单元格占用更少的空间，它实际上是通过JQuery完成的，但是对于该示例，我们仅使用2。

    	.Region{
    		position: absolute;
    		top: 10px;
    		left: 10px;
    		width: 500px;
    		height: 500px;
    		border: 5px double black;
    		display: flex;
    	}
    	
    	.FlexContainer{
    		display: flex;
    		flex-direction: column;
    		flex-grow: 1;
    	}
    	
    		.FlexContainer > div{
    			flex-grow: 1;
    			flex-basis: 0;
    			border: 3px solid blue;
    			display: flex;
    			flex-direction: row;
    			margin: 5px;
    		}
    		
    			.FlexContainer > div > div{
    				flex-grow: 1;
    				flex-basis: 0;
    				border: 1px solid red;
    				margin: 3px;
    				display:flex;
    				flex-direction: row;
    			}
    			
    	.Overlay{
    		position: absolute;
    		width: 100%;
    		height: 100%;
    		background-color: rgba(013, 130, 230, 0.5);
    		cursor: not-allowed;
    	}

 <div class="Region">
    	<div class="FlexContainer">
    		<div>
    			<div>
    				<div class="FlexContainer">
    					<div>
    						<div></div>
    						<div></div>
    						<div></div>
    					</div>
    					<div>
    						<div></div>
    						<div></div>
    						<div></div>
    					</div>
    					<div>
    						<div></div>
    						<div></div>
    						<div></div>
    					</div>
    				</div>
    			</div>
    			<div></div>
    			<div></div>
    		</div>
    		<div>
    			<div></div>
    			<div></div>
    			<div></div>
    		</div>
    		<div>
    			<div>
    				<div class="FlexContainer">
    				<div class="Overlay"></div>
    					<div>
    						<div>
    						</div>
    						<div></div>
    						<div></div>
    					</div>
    					<div>
    						<div></div>
    						<div></div>
    						<div></div>
    					</div>
    					<div>
    						<div></div>
    						<div></div>
    						<div></div>
    					</div>
    				</div>
    			</div>
    			<div></div>
    			<div></div>
    		</div>
    	</div>
    </div>

我尝试在内部FlexContainer的内部和外部使用Overlay，但是没有用。

Answer 1

最后使它起作用，实际上父容器必须具有相对位置才能起作用，因此有两个更改，一个在 FlexContainer 中，另一个在 Overlay

.FlexContainer{
    position:relative; <-- ADD THIS
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.FlexContainer .Overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0px;
    border: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(013, 130, 230, 0.5);
    cursor: not-allowed;
}

电笔解决方案 https://codepen.io/anon/pen/dKaXqg

从css-tricks网站向用户 Pogany 的积分

CSS-TRICKS 线程：https://css-tricks.com/forums/topic/add-and-overlay-div-in-nested-flex-box-container/#post-273437