Question

因此，我试图使蓝色元素优先出现，因为红色元素停留在蓝色元素的前面，使文本显示在其下方，这与我想象的布局有些混乱。

我正在使用z-index属性，但是无论如何，红色椭圆形的元素都会保留在前面...

这是我的代码：

<div style="width:100%; height:auto; display:flex; flex-direction:column; overflow:hidden; outline:1px solid red; ">
    <div style="width:100%; height:auto; background-color:red; position:relative; margin-top:300px; padding:25px;">
	    <div style="width:105%; height:500px; border-radius:50%; position:absolute; left:50%; z-index:1; transform:translateX(-50%);  top:-150px; background-color:red;"></div>
	    <div style="width:100%; min-height:500px; background-color:blue; z-index:2; display:flex; flex-direction:column; ">
            <span style="font-size:30px; color:red; align-self:center; margin-top:auto;">MENU</span>
		</div>
	</div>
</div>

Answer 1

z-index仅适用于定位的元素（position：absolute，位置：相对，或位置：固定）。

您可以使用W3 School

了解有关z-index的更多信息

将position:relative设置为蓝色div

无法使用z-index将此div提前

1 个答案: