在特定单元格的嵌套 flex 容器（3x3 网格）内添加覆盖 div答案

【问题标题】：Add an overlay div inside nested flex containers (3x3 grid) in a specific cell在特定单元格的嵌套 flex 容器（3x3 网格）内添加覆盖 div
【发布时间】：2018-12-02 04:14:27
【问题描述】：

我有一个带有 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>

我尝试过在 Inner FlexContainer 内部和外部使用 Overlay，但没有成功。

【问题讨论】：

标签： css html flexbox

【解决方案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

【讨论】：