html - 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_background_oval 的子元素，它的 z-index 为 1，圆将继承相同的 z-index。你可以认为它在某个层上有一个 9999999999 的 z-index (z-index: 1)，但这实际上与 z-index: 1;

相同

更改圆的父级的 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: 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>