css - 在特定单元格的嵌套 flex 容器(3x3 网格)内添加覆盖 div

Question

我有一个带有 flexbox 概念的 3x3 网格，在每个单元格内部都有另一个 3x3 网格。

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

我找到了一些这样的例子 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>

我已经尝试在 Inner 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