Question

我有一个网络应用，包含上下元素（div），两者都有position: fixed。这些元素中的每一个都有子元素（弹出窗口），它们也有position: fixed。

我想将弹出窗口放在父元素上。但是，由于我使用的是position: fixed，因此z-index属性不起作用，因为它是从父母那里继承的。

我在Stack-overflow中看到了类似的问题，但是没有一个能解决这个问题。

上的html / css

＆＃13;

<html>
<head></head>
<body style="height: 100%;">

  <div style="
        background-color: red;
    	position: fixed;
    	display: block;
    	width: 100%;
    	height: 50%;
    	top: 0%;			
    	z-index: 2; ">
Top
    <div style="			
    		background-color: pink;
    		position: fixed;
    		display: block;
    		width: 80px;
    		height: 200px;
    		top: 40%;
    		left: 100px;
    		z-index: 20; ">
      PopUp-Top - Need to be on top!
    </div>
  </div>

  <div style="
    	background-color: green;
    	position: fixed;
    	display: block;
    	width: 100%;
    	height: 50%;
    	top: 50%;
    	z-index: 2; ">
Bottom
    <div style="		
    		background-color: lightgreen;
    		position: fixed;
    		display: block;
    		width: 80px;
    		height: 200px;
    		top: 40%;
    		left: 200px;
    		z-index: 20; ">
      PopUp-Bottom - Need to be on top!
    </div>
  </div>
</body>
</html>

＆＃13;

Answer 1

z-index并非按照您希望的方式工作，因为您在div中嵌入div并不是因为您将位置设置为固定。为什么不把弹出窗口div放在其他人的外面（ontop）？ https://jsfiddle.net/7efx38um/1/

＆＃13;

<html>
<head></head>
<body style="height: 100%;">

	<div style="
			background-color: red;
			position: fixed;
			display: block;
			width: 100%;
			height: 50%;
			top: 0%;			
			z-index: 1;
			">
			Top
	</div>
		<div style="			
			background-color: pink;
			position: fixed;
			display: block;
			width: 80px;
			height: 200px;
			top: 40%;
			left: 100px;
			z-index: 20;
			">
			PopUp-Top - Need to be on top!
		</div>
		

	
	<div style="
			background-color: green;
			position: fixed;
			display: block;
			width: 100%;
			height: 50%;
			top: 50%;
			z-index: 1;
			">
			Bottom
				</div>
		<div style="		
			background-color: lightgreen;
			position: fixed;
			display: block;
			width: 80px;
			height: 200px;
			top: 40%;
			left: 200px;
			z-index: 20;
			">
			PopUp-Bottom - Need to be on top!
		</div>

	

</body>
</html>

＆＃13;

另外，如果您同时想要横幅和弹出式div并在另一个内部，则可以在两者周围创建虚拟div，这样就可以了弹出窗口不会使用与横幅相同的样式;）

＆＃39;

Answer 2

简单的解决方案是，我正在努力做的事情是无法通行的。

#Krypton 的回答确实通过改变html解决了这个问题，但在我的情况下，改变html顺序是不可能的。

元素的顺序称为堆叠顺序，堆叠顺序为：
1.如果没有z-index或position，那么堆叠顺序就像html标记顺序一样。
2.所有定位元素（relative，absolute和fixed）都显示在所有无定位元素（static）的顶部。
3. z-index仅适用于定位元素，它将创建堆叠上下文。

堆叠上下文
如果符合以下条件之一，则具有共同父项的元素组将创建堆叠上下文：
1.根文档元素（<html>元素）。
2.带z-index的定位元素
3.不透明度小于1 的元素（大多数Web开发人员都不知道）
堆叠上下文中的所有元素按堆叠顺序一起移动，意味着如果在放样上下文a中的元素A，不能在放样上下文b内的元素B之上，如果堆叠顺序为B高于A，即使元素'a'的z-index为百万。

更新：创建堆叠上下文的新css角色：transform，filter，css-region和pages_media。

堆叠上下文中的顺序：
1.根元素 2.具有负z指数的定位元素。
3.没有按照html标记的顺序定位元素
4.定位元件
5.根据z-index定位具有z-index的元素。

现在回到这个问题，在这个例子中，红色和绿色div都创建堆叠上下文，因为它们被定位（固定）并具有z-index。
它们都具有相同的z-index（值为2），因此堆叠顺序是绿色下方的红色，因为这是html标记的顺序。
现在让我们看看粉红色和浅绿色元素，粉红色嵌套在红色元素和绿色元素内的浅绿色中，由于红色元素的放样顺序低于绿色，红色元素内的所有嵌套元素都出现在绿色元素内的所有元素下面。

要解决此问题，我们需要创建一个新元素，该元素将创建一个新的堆叠上下文，其堆叠顺序高于红色和绿色div，并将弹出窗口放在这些元素中。

参考： 菲利普沃尔顿： https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

z-index不使用父项处于固定位置的元素

2 个答案: