z-index和定位元素存在问题

Question

我试图将黄色圆圈放在所有元素的顶部，所有元素的位置都已确定，因此我的999999999的z-index应该放在前面，但是由于某些原因它不起作用，有什么帮助吗？

 .menu_maincontainer{width:100%; height:auto; display:flex; flex-direction:column; overflow:hidden; outline:1px solid red; position:relative; } .menu_contents_container{width:100%; height:auto; background-color:red; position:relative; margin-top:300px; padding:25px;} .menu_background_oval{width:105%; height:500px; border-radius:50%; position:absolute; left:50%; z-index:1; transform:translateX(-50%); top:-180px; background-color:red;} .menu_contants_decorative_circle{width:200px; height:200px; border-radius:50%; border:1px solid blue; background-color:yellow; position:absolute; z-index:9999999999; left:50%; top:50px; transform:translateX(-50%); } .menu_contents_texts_container{width:100%; min-height:500px; background-color:red; z-index:2; outline:1px solid blue; display:flex; flex-direction:column; position:relative; } 

 <div class="menu_maincontainer" style=""> <div class="menu_contents_container" style=""> <div class="menu_background_oval" style=""> <div class="menu_contants_decorative_circle" style=""></div> </div> <div class="menu_contents_texts_container" style=""> </div> </div> </div> 

Answer 1

由于menu_contants_decorative_circle是menu_contants_decorative_circle的子menu_background_oval ，其z-index为1，因此圆将继承相同的z-index。 您可以认为它在某个图层上的z索引为9999999999（z索引：1），但实际上与z-index: 1;

更改圆的父级的z索引将解决此问题：

 .menu_maincontainer { width: 100%; height: auto; display: flex; flex-direction: column; overflow: hidden; outline: 1px solid red; position: relative; } .menu_contents_container { width: 100%; height: auto; background-color: red; position: relative; margin-top: 300px; padding: 25px; } .menu_background_oval { width: 105%; height: 500px; border-radius: 50%; position: absolute; left: 50%; z-index: 5; /* changed */ transform: translateX(-50%); top: -180px; background-color: red; } .menu_contants_decorative_circle { width: 200px; height: 200px; border-radius: 50%; border: 1px solid blue; background-color: yellow; position: absolute; z-index: 1; left: 50%; top: 50px; transform: translateX(-50%); } .menu_contents_texts_container { width: 100%; min-height: 500px; background-color: red; z-index: 2; outline: 1px solid blue; display: flex; flex-direction: column; position: relative; } 

 <div class="menu_maincontainer"> <div class="menu_contents_container"> <div class="menu_background_oval"> <div class="menu_contants_decorative_circle"></div> </div> <div class="menu_contents_texts_container"> </div> </div> </div>