在特定单元格中的嵌套Flex容器（3x3网格）内添加叠加div [英] Add an overlay div inside nested flex containers (3x3 grid) in a specific cell

问题描述

我有一个带有灵活盒概念的3x3网格，在每个单元格内部还有另一个3x3网格。

I have a 3x3 grid with flex-box concept, inside of each cell it has another 3x3 grid.

我试图在内部网格上叠加一个在一个单元格中，但我没有找到怎么做。

I was trying to put an Overlay over the Inner grid in one cell, but I didn't find how to do it.

我发现了一些像这样的例子
覆盖/悬停Flexbox容器div中的div
但它在嵌套中不起作用flex-box，或者我不知道如何设置它们。

I found some examples like this one Overlay / hover a div in flexbox container div but it don't work in nested flex-box, or I don't know how to set them up.

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

here is the html, the grid has just two cell to take up less space, it actually is done with JQuery but for the example lets use only 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之外，但没有工作。

I have tried with the Overlay inside and outside the Inner FlexContainer, but didn't work.

推荐答案

最后让它工作，确实父容器必须有相对位置为了它的工作，所以有两个变化，一个在 FlexContainer ，另一个在叠加

Finally got it to work, indeed the parent container must have relative position for it to work, so there is two change, one in the FlexContainer and other in the 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

Credits to user Pogany from the css-tricks web site CSS-TRICKS thread: https://css-tricks.com/forums/topic/add-and-overlay-div-in-nested-flex-box-container/#post-273437

这篇关于在特定单元格中的嵌套Flex容器（3x3网格）内添加叠加div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！