Question

我正在尝试在所有元素上方放置一个黄色圆圈，所有元素都已放置好，因此我的999999999的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: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索引为1，因此圆将继承相同的z索引。您可以将其视为在特定图层上的z索引为9999999999（z索引：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>

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

1 个答案: